jquery切换div，打开关闭按钮

一、点击标题，隐藏显示div并添加删除样式

<ul class="character">
<li id="tanke"><a href="#tanke">坦克</a></li>
<li id="zhanshi"><a href="#zhanshi">战士</a></li>
<li id="fashi"><a href="#fashi">法师</a></li>
<li id="cike"><a href="#cike">刺客</a></li>
<li id="sheshou"><a href="#sheshou">射手</a></li>
<li id="fuzhu"><a href="#fuzhu">辅助</a></li>
</ul>

<ul class="skinall" id="tanke1"><li></li></ul>

<ul class="skinall" id="tanke1"><li></li></ul>

<ul class="skinall" id="zhanshi1"><li></li>

</ul>......

<script type="text/javascript">
$(function () {
//默认显示第一个元素
/*$(".skinall").hide();*/
$(".skinall").eq(0).show();
$("#tanke a").addClass("jq");
});

$(".character li").each(function () {
$(this).click(function () {

$(".skinall").eq($(this).index()).show();
$(".skinall").eq($(this).index()).siblings().hide();
$(this).parent().css("display", "block");
$(".timedis").css("display", "block");
$(this).find("a").addClass("jq");
$(this).siblings().find("a").removeClass("jq");

});
});
</script>

二、点击不同的按钮打开关闭块

<i class="jun"></i>
<i class="xx"></i>
<div class="right">
<ul class="jun1">
<li class="login"><a href="login2.html"><span>登录</span></a></li>
<li class="register"><a href="register2.html"><span>注册</span></a></li>
</ul>
</div>

<script type="text/javascript">

$(".jun").click(function () {
$(".right").slideDown();
$(".jun").css("display", "none");
$(".xx").css("display", "block");
});
$(".xx").click(function () {
$(".right").slideUp();
$(".xx").css("display", "none");
$(".jun").css("display", "block");
});

</script>