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类名,这样实现其他模块进入页面隐藏。
使用jq简单实现导航栏切换对应展现内容
最新推荐文章于 2024-07-20 20:00:19 发布