mrf*_*ier 1 html javascript css jquery menubar
好的，我正在这个网站上工作，我希望根据单击的菜单项将 div 的内容更改为内容。我没有不同菜单项的页面，但我在索引页面的 div 中有所有不同的内容。我想合并 JQuery，但我似乎无法找到将菜单项类或 id 链接到相应 div 元素的方法。我的代码如下”：
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home"><a href="#">Home</a></li>
<li class="btn" id="about"><a href="#">About Me</a></li>
<li class="btn" id="gallery"><a href="#">Gallery</a></li>
<li class="btn" id="resume"><a href="#">Resume</a></li>
<li class="btn" id="contact"><a href="#">Contact Me</a></li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
等等..
至于我的 JQuery 编码到目前为止，这是我在尝试不同的事情后的几个小时
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});
不是为每个菜单项编写单独的处理程序，而是使用data-*属性来引用需要显示的特定内容，然后在单击处理程序中使用该属性来决定必须显示哪些内容
<div class="navbar grid_12">
<ul>
<li class="btn" id="home"><a href="#">Home</a></li>
<li class="btn" id="about" data-target=".bio"><a href="#">About Me</a></li>
<li class="btn" id="gallery" data-target=".gallery"><a href="#">Gallery</a></li>
<li class="btn" id="resume"><a href="#">Resume</a></li>
<li class="btn" id="contact" data-target=".contact"><a href="#">Contact Me</a></li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
然后
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
演示：小提琴