jQuery 之 两个div之间切换

1.HTML代码：

<div class="lg-login">
<ul class="lg-tit clearfix">
<li id="lg-res" class="fl active">预登记编码入场</li>
<li id="lg-msg" class="fl ">短信验证码入场</li>
</ul>
<div class="lg-con-box pr" id="tab">

<div id="ex-login-res" class="tabcontent">
<ul class="lg-con">
<li class="lg-res" id="res-lg-res">
<input type="tel" id="UserMobile" name="UserMobile" placeholder="">
</li>
<li class="lg-msg" id="res-lg-msg">
<input type="text" id="RegistratCode" name="RegistratCode" placeholder="">
</li>
</ul>
<div class="btn-box lg-btn-box" id="send-login-res">
<div class="btn next-btn red-btn">
<button type="button" class="ValidatPageSubmitBM"></button>
</div>
</div>
</div>
<div id="ex-login-msg" class="tabcontent" style="display:none;">
<ul class="lg-con pr">
<li class="lg-res" id="msg-lg-res">
<input type="tel" id="UserMobile1" name="UserMobile1" placeholder="">
</li>
<li class="lg-code pr" id="msg-lg-code">
<input type="text" name="txtcode" id="txtcode" placeholder="" value=""><b id="msgtxtcode"></b>
<!-- 样式调整依据class：can-code的有无 -->

<div id="get-code" class="get-code can-code pa">
<button type="button" class="fr1" id="btGetCode" name="btGetCode" onclick="GetCode()"></button>
<!--  59s后重发 -->
</div>
</li>
<!-- 发送短信后显示 -->
<p id="send-code" class="pa"></p>
</ul>
<div class="btn-box lg-btn-box" id="send-login-msg">
<div class="btn next-btn red-btn">
<button type="button" class="ValidatPageSubmitYZM"></button>
</div>
</div>
</div>
</div>
</div>

2.jQuery代码：

<script language=javascript type=text/javascript>
$(document).ready(function () {
var lis = $('.clearfix li');
var uls = $('#tab .tabcontent');

lis.click(fu
4000
nction () {
var li_selected = $(this);//选中的li分类
var num = li_selected.index();//相对于同胞元素的位置
lis.removeClass("active");//清空liCSS属性
li_selected.addClass('active');//选中li添加属性
uls.css("display", "none");//隐藏所有form标签
uls.eq(num).css("display", "block");    //展示选中的li所对应的form内容
});
})
</script>

3.jQuery（方法二）：

$('#lg-res').click(function () {
$("#lg-msg").removeClass("active");//清空liCSS属性
$(this).addClass('active');//选中li添加属性
$("#ex-login-res").css("display", "block");
$("#ex-login-msg").css("display", "none");
$("#UserMobile").val("");
$("#RegistratCode").val("");
});
$('#lg-msg').click(function () {
$("#lg-res").removeClass("active");//清空liCSS属性
$(this).addClass('active');//选中li添加属性
$("#ex-login-res").css("display", "none");
$("#ex-login-msg").css("display", "block");
$("#UserMobile1").val("");
$("#txtcode").val("");
});