使用jq简单实现导航栏切换对应展现内容

最新推荐文章于 2024-07-20 20:00:19 发布

__仰望

最新推荐文章于 2024-07-20 20:00:19 发布

阅读量5.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42164539/article/details/90699437

版权

前端专栏收录该内容

71 篇文章 2 订阅

订阅专栏

在这里插入图片描述

js代码部分
 $('.nav_menu_ul>li').click(function () {  //点击导航栏
        var index = $(this).index()  //获取导航栏的下标        
       $(".goods").find(".goods_info").eq(index).removeClass('display_none').siblings()
            .addClass('display_none'); 
        获取全部模块外层div元素，找到全部类名相同其中与导航栏下标相同的子元素，找到后移除display_none显示，利用siblings（）方法找到其他相邻的类名相同的元素添加类display_none实现隐藏
    })
css部分
.display_none{
	display:none
}
ps: 在单个模板的div盒子中加上定义的display_none类型，但是第一个对面展示的内容不用加 display_none；其他展示模块div 都加上 display_none类名，这样实现其他模块进入页面隐藏。