tabs切换效果，控制对应的文章显示

最新推荐文章于 2024-08-23 09:34:23 发布

月小满

最新推荐文章于 2024-08-23 09:34:23 发布

阅读量145

点赞数

分类专栏：前端js

本文链接：https://blog.youkuaiyun.com/weixin_44110923/article/details/118099286

版权

前端js 专栏收录该内容

22 篇文章

订阅专栏

这里展示是4块文章列表已调出，需要根据标题类型，显示对应的li内容。废话不多说直接上代码：

HTML代码如下：

<div class="pannel right3">
                <h2>
                    <b>巡检记录</b>
                    <span id="tab5">
                        <a href="javascript:;">客服部</a>
                        <a href="javascript:;">工程部</a>
                        <a href="javascript:;">秩序部</a>
                        <a href="javascript:;">保洁部</a>
                    </span>
                </h2>
                <div class="chart scrollitem" id="rw_chart2">
                    <ul>
                        <li class="color3">
                            <span>03-31 12:20</span>
                            <span>李某某</span>
                            <span>巡检地点</span>
                        </li>
                        <li class="color2">
                            <span>03-31 10:50</span>
                            <span>王某某</span>
                            <span>巡检地点</span>
                        </li>
                        <li class="color3">
                            <span>03-31 12:20</span>
                            <span>李某某</span>
                            <span>巡检地点</span>
                        </li>
                        <li class="color2">
                            <span>03-31 12:20</span>
                            <span>李某某</span>
                            <span>巡检地点</span>
                        </li>
                        <li class="color1">
                            <span>03-31 10:50</span>
                            <span>王某某</span>
                            <span>巡检地点</span>
                        </li>
                        <li class="color2">
                            <span>03-31 12:20</span>
                            <span>李某某</span>
                            <span>巡检地点</span>
                        </li>
                        <li class="color4">
                            <span>03-31 10:50</span>
                            <span>王某某</span>
                            <span>巡检地点</span>
                        </li>
                        <li class="color4">
                            <span>03-31 10:50</span>
                            <span>王某某</span>
                            <span>巡检地点</span>
                        </li>
                    </ul>
                </div>
            </div>

重要js代码在这里：

//点击切换效果
$('#tab5 a').click(function () {
  $(this).addClass('active').siblings().removeClass('active');
  var e= Number($(this).index())+1;
  $('#rw_chart2 li').each(function(){
    if($(this).hasClass('color'+e)){
      $(this).show()
    }else{
      $(this).hide()
    }
  })
});