美文网首页
jquery table切换

jquery table切换

作者: 前端陈陈陈 | 来源:发表于2020-12-28 09:27 被阅读0次

1、

//title
    <div class="center_info ">
        <div class="center_info_box declaration active sj">1111
                <div class="navst sp sp_1"></div>
        </div>  
        <div class="center_info_box  center_c declaration yj">222
        <div class="navst sp sp_2" style="display: none;"></div></div>
        <div class="center_info_box declaration fs">333
            <div class="navst sp sp_3" style="display: none;"></div></div>
    </div>


//内容
    <div class="apply-record">
            <div class="contentst products">
                <div class="mainCont selected">
                            <div class="boxs">
            <div class="title">
                <p class="names1 ">排名</p>
                <p class="names2">头像</p>
                <p class="names3">用户名</p>
                <p class="names4">累积赏金</p>
            </div>
            <div class="contents">
            <div class="contents_info" >
                <div class="serial ones"></div>
                <img class="imgst twos" src="">
                <div class="threes"></div>
                <div class="fous"></div>
            </div>
            </div>
            <div class="arrow_box">
                <img class="aart arr_left bountyy_left" src="../addons/ewei_shopv2/template/mobile/default/static/images/arrow_left.png">
                <img class="aart arr_right bountyy_right" src="../addons/ewei_shopv2/template/mobile/default/static/images/arrow_right.png">
            </div>
        </div>
                </div>

                <div class="mainCont" style="display: none;">
            <div class="boxs">
            <div class="title">
                <p class="names1 ">排名</p>
                <p class="names2">头像</p>
                <p class="names3">用户名</p>
                <p class="names4">累积佣金</p>
            </div>
            <div class="contentsn">
            <div class="contents_info" >
                <div class="serial ones"></div>
                <img class="imgst twos" src="">
                <div class="threes"></div>
                <div class="fous"></div>
            </div>
            </div>
            <div class="arrow_box">
                <img class="aart arr_left brokerage_left" src="../addons/ewei_shopv2/template/mobile/default/static/images/arrow_left.png">
                <img class="aart arr_right brokerage_right" src="../addons/ewei_shopv2/template/mobile/default/static/images/arrow_right.png">
            </div>
        </div>
                </div>
                
                <div class="mainCont" style="display: none;">
                        <div class="boxs">
            <div class="title">
                <p class="names1 ">排名</p>
                <p class="names2">头像</p>
                <p class="names3">用户名</p>
                <p class="names4">锁粉数量</p>
            </div>
            <div class="contentsnt">
            <div class="contents_info" >
                <div class="serial ones"></div>
                <img class="imgst twos" src="">
                <div class="threes"></div>
                <div class="fous"></div>
            </div>
            </div>
            <div class="arrow_box">
                <img class="aart arr_left fans_left" src="../addons/ewei_shopv2/template/mobile/default/static/images/arrow_left.png">
                <img class="aart arr_right fans_right" src="../addons/ewei_shopv2/template/mobile/default/static/images/arrow_right.png">
            </div>
        </div>
                </div>
            </div>
        </div>

// js
    $(".center_info .center_info_box").click(function() {
                $(this).addClass("active").siblings().removeClass("active");
                $(".products .mainCont").eq($(this).index()).show().siblings().hide();
            })
                $(".center_info_s .center_info_boxs").click(function() {
                $(this).addClass("actives").siblings().removeClass("actives");
                // $(this).addClass("sp").siblings().removeClass("sp");
                $(".products .mainConts").eq($(this).index()).show().siblings().hide();
            })
            $(".sj").click(function(){
            $(".sp_1").show();
            $(".sp_2").hide();
            $(".sp_3").hide();
            Bountyy(1)
            });
            $(".yj").click(function(){
            $(".sp_1").hide();
            $(".sp_2").show();
            $(".sp_3").hide();
            brokerage(1)
            });
            $(".fs").click(function(){
            $(".sp_1").hide();
            $(".sp_2").hide();
            $(".sp_3").show();
            fanst(1)
            });

相关文章

网友评论

      本文标题:jquery table切换

      本文链接:https://www.haomeiwen.com/subject/orrznktx.html