jquery怎么实现菜单随着内容切换

lewis 6年前 (2019-02-09) 阅读数 12 #程序编程

文章标签 jquery

要实现菜单随着内容切换，你可以使用jQuery来监听内容的变化并相应地改变菜单项的状态或样式。

以下是一个简单的示例代码：

<!DOCTYPEhtml><html>
<head>
<title>菜单切换</title>
<style>
.menu-item{
display:none;
}
.active{
display:block;
}
</style>
</head>
<body>
<ulclass="menu">
<liclass="menu-itemactive">菜单1</li>
<liclass="menu-item">菜单2</li>
<liclass="menu-item">菜单3</li>
</ul>
<divclass="content">
<divclass="content-itemactive">内容1</div>
<divclass="content-item">内容2</div>
<divclass="content-item">内容3</div>
</div>
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
//监听菜单项点击事件
$('.menu-item').click(function(){
//移除所有菜单项的active类
$('.menu-item').removeClass('active');
//添加当前菜单项的active类
$(this).addClass('active');
//获取当前菜单项的索引
varindex=$(this).index();
//隐藏所有内容项
$('.content-item').hide();
//显示对应索引的内容项
$('.content-item').eq(index).show();
});
});
</script>
</body>
</html>