我有一个导航栏和我希望在点击导航栏链接时显示的div。它们不是将div作为导航栏链接的后代，而是分开的（我知道这可能不应该完成）。因此，我为每个导航栏链接创建了一个数据标签，该标签与应该在点击时显示的div的数据标签相匹配。
所以，我想点击导航链接，找到数据标签（我已经用Jquery成功完成），将该数据标签与不同的div匹配并显示该div（同时隐藏其他div）。我想我需要创建一个div数组，然后有一些Jquery代码来创建一个数组并通过它来查找匹配的数据类型，然后显示div ...感谢您的帮助！
<div id="nav">
<ul>
<li><a href="#" class="navselection" data-type="1">1</a></li>
<li><a href="#" class="navselection" data-type="2">2</a></li>
<li><a href="#" class="navselection" data-type="3">3</a></li>
<li><a href="#" class="navselection" data-type="4">4</a></li>
<li><a href="#" class="navselection" data-type="5">5</a></li>
</ul>
</div>
<div id="main">
<div id="main1" data-type="1">Main 1</div>
<div id="main2" data-type="2">Main 2</div>
<div id="main3" data-type="3">Main 3</div>
<div id="main4" data-type="4">Main 4</div>
<div id="main5" data-type="5">Main 5</div>
</div>
答案 0 :(得分：1)
非常简单，在点击时隐藏所有div，然后显示你想要的那个：
$("#nav ul li").click(function() {
$("#main div").hide(); //hide others if open
var type = $("a", this).data("type"); //get the data-type value of the clicked li's a child tag
$("#main div[data-type='" + type + "']").show(); //show the matching data-type div
});
答案 1 :(得分：0)
为什么不使用选项卡组进行导航，它将显示在页面顶部，一旦您单击不同的选项卡，它将显示每个div。您可以以不同方式配置每个div，而不必担心它们一起显示在页面上。
jqueryui.com提供的基本选项卡界面示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
您可以在下面找到通过多项性能增强解决您的问题的代码（请参阅代码注释中的详细内容）。
var divs = $('#main [data-type]').hide(); // search divs one time instead of traversing DOM each time link is clicked
$('#nav').on('click', '.navselection', function() { // Bind one event listener to #nav with scope selector instead of having event listener on each link
var type = this.getAttribute('data-type'); // minimize calls of slow DOM APIs by caching relevant data-type
$.each(divs, function(index, div) { // iterate array only once and apply relevant function
$(div)[div.getAttribute('data-type') === type ? 'show' : 'hide']();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li><a href="#" class="navselection" data-type="1">1</a></li>
<li><a href="#" class="navselection" data-type="2">2</a></li>
<li><a href="#" class="navselection" data-type="3">3</a></li>
<li><a href="#" class="navselection" data-type="4">4</a></li>
<li><a href="#" class="navselection" data-type="5">5</a></li>
</ul>
</div>
<div id="main">
<div id="main1" data-type="1">Main 1</div>
<div id="main2" data-type="2">Main 2</div>
<div id="main3" data-type="3">Main 3</div>
<div id="main4" data-type="4">Main 4</div>
<div id="main5" data-type="5">Main 5</div>
</div>
还有一个没有JavaScript的解决方案（仅使用CSS）
#main > div {
display: none;
}
#main > div:target {
display: block;
}<div id="nav">
<ul>
<li><a href="#main1" class="navselection">1</a></li>
<li><a href="#main2" class="navselection">2</a></li>
<li><a href="#main3" class="navselection">3</a></li>
<li><a href="#main4" class="navselection">4</a></li>
<li><a href="#main5" class="navselection">5</a></li>
</ul>
</div>
<div id="main">
<div id="main1">Main 1</div>
<div id="main2">Main 2</div>
<div id="main3">Main 3</div>
<div id="main4">Main 4</div>
<div id="main5">Main 5</div>
</div>