jquery - 这是我写的 HTML 我想点击 li 标签让下面的 tab 添加去除 xian 这个 class

问题描述

问 题

            <div class="main-lnav">
                <p><a href="##"><img src="skin/2016/images/jrtt.png"></a></p>
                <ul>
                    <li class="lgo"><a href="##">推荐</a></li>
                    <li><a href="##">热文</a></li>
                    <li><a href="##">邯郸</a></li>
                    <li><a href="##">房企</a></li>
                    <li><a href="##">独家</a></li>
                    <li><a href="##">置业</a></li>
                    <li><a href="##">专题</a></li>
                    <li><a href="##">土地</a></li>
                    <li><a href="##">楼市</a></li>
                </ul>
            </div>
        </div>
        <!--左侧导航结束-->
        <!--中间内容-->
        <div class="main-content">
            <div class="tab xian">
            <!--轮播-->
            <div id="focus-banner">
                    <ul id="focus-banner-list">
                        <li>
                            <a href="#" class="focus-banner-img">
                                <img src="skin/2016/images/banner2.jpg" alt="">
                            </a>
                            <div class="focus-banner-text">
                                <p>这是一句广告语</p>                    
                            </div>
                        </li>
                        <li>
                            <a href="#" class="focus-banner-img">
                                <img src="skin/2016/images/banner3.jpg" alt="">
                            </a>
                            <div class="focus-banner-text">
                                <p>这是二句广告语</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="focus-banner-img">
                                <img src="skin/2016/images/banner4.jpg" alt="">
                            </a>
                            <div class="focus-banner-text">
                                <p>这是三句广告语</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="focus-banner-img">
                                <img src="skin/2016/images/banner5.jpg" alt="">
                            </a>
                            <div class="focus-banner-text">
                                <p>这是四句广告语</p>
                            </div>
                        </li>
                    </ul>
                    <a href="javascript:;" id="next-img" class="focus-handle"></a>
                    <a href="javascript:;" id="prev-img" class="focus-handle"></a>
                    <ul id="focus-bubble"></ul>
                </div>
                <!--轮播-->
                <div class="lie">
                     <div class="investment_con">
                         
                        <div class="lie-Title">
                            <a href="##"><img src="skin/2016/images/lie-title1.jpg"></a>
                        </div>
                        <div class="lie-outline">
                            <ul>
                                <li><a href="##">恋家网质询阿斯达克就爱上看来大家可拉伸的金坷垃圣的金坷垃圣诞节阿喀琉斯简单快乐</a></li>
                                <li><p>阿斯达克就爱上看来大家可拉伸的金坷垃圣诞节阿喀琉斯简单快乐</p></li>
                            </ul>
                        </div>
                    </div>
                </div>    
            </div>
            <div class="tab">
                <div class="lie">
                     <div class="investment_con">
                         
                        <div class="lie-Title">
                            <a href="##"><img src="skin/2016/images/lie-title1.jpg"></a>
                        </div>
                        <div class="lie-outline">
                            <ul>
                                <li><a href="##">恋家网质询阿斯达克就爱上看来大家可拉伸的金坷垃圣的金坷垃圣诞节阿喀琉斯简单快乐</a></li>
                                <li><p>阿斯达克就爱上看来大家可拉伸的金坷垃圣诞节阿喀琉斯简单快乐</p></li>
                            </ul>
                        </div>
                    </div>
                </div>    
            </div>
            <div class="tab">
                <div class="lie">
                     <div class="investment_con">
                         
                        <div class="lie-Title">
                            <a href="##"><img src="skin/2016/images/lie-title1.jpg"></a>
                        </div>
                        <div class="lie-outline">
                            <ul>
                                <li><a href="##">恋家网质询阿斯达克就爱上看来大家可拉伸的金坷垃圣的金坷垃圣诞节阿喀琉斯简单快乐</a></li>
                                <li><p>23232323323爱上看来大家可拉伸的金坷垃圣诞节阿喀琉斯简单快乐</p></li>
                            </ul>
                        </div>
                    </div>
                </div>    
            </div>
            <div class="tab">
                <div class="lie">
                     <div class="investment_con">
                         
                        <div class="lie-Title">
                            <a href="##"><img src="skin/2016/images/lie-title1.jpg"></a>
                        </div>
                        <div class="lie-outline">
                            <ul>
                                <li><a href="##">恋家网质询阿斯达克就爱上看来大家可拉伸的金坷垃圣的金坷垃圣诞节阿喀琉斯简单快乐</a></li>
                                <li><p>454545454545来大家可拉伸的金坷垃圣诞节阿喀琉斯简单快乐</p></li>
                            </ul>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    下面是我写的ｊｑｕｅｒｙ哪里出错了？求指点
      $(".main-lnav li").click(function(e){
    $(this).siblings().removeClass('lgo');
    $(this).addClass('lgo');
    e.stopPropagation();
    //table切换
    $(".tab").siblings().removeClass('xian');
    $(".tab").addClass('xian');
    e.stopPropagation();
});

解决方案

<script type="text/javascript">
$(".main-lnav li").each(function(i){
    $(this).click(function(){
        $(this).addClass('lgo').siblings().removeClass('lgo');
        $(".tab").removeClass('xian');
        $(".tab").eq(i).addClass('xian')
    })
})
</script>

这篇关于jquery - 这是我写的 HTML 我想点击 li 标签让下面的 tab 添加去除 xian 这个 class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！