jQuery 之两个div之间切换

最新推荐文章于 2023-09-25 15:20:54 发布

Hubert_Biyo

最新推荐文章于 2023-09-25 15:20:54 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery tab切换

本文链接：https://blog.youkuaiyun.com/DXB601/article/details/73551572

前端技术专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用jQuery实现两个div之间的切换效果，包括HTML结构和相应的jQuery代码实现，提供了两种不同的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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