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(function () {                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("");            });