Question

我有几个文本块分隔成他们自己的div。我还在导航栏中有几个链接，用链接引用这些div。点击后，我想隐藏除被点击的链接引用的div之外的所有其他div。我有：

<div id="navbar">
  <ul>
   <li><a href="#section1">Link 1</a></li>
   <li><a href="#section2">Link 2</a></li>
   <li><a href="#section3">Link 3</a></li>
   <li><a href="#section4">Link 4</a></li>  
  </ul>
</div>

所以，当我点击'Link 3'时。我想隐藏除＃section3之外的所有div。

我很好用CSS隐藏/显示每个文本部分，但我无法弄清楚如何使用链接的href属性来引用div名称。

感谢您的帮助，如果您需要澄清我的要求，请告诉我。

Answer 1

试试这个：

$('#navbar a').click(function() {
    $('div:not(#navbar)').hide();
    $($(this).attr('href')).show();
    return false; // You may or may not want this line.
});

您可以看到示例here。

Answer 2

你可以使用主播的.hash property作为选择器，你需要的就是首先隐藏你想要的div，如下所示：

$('#navbar a').click(function(e) {
    $('.container > div').hide();
    $(this.hash).show();
    e.preventDefault(); //to prevent scrolling
});

这假设您要在某种容器中显示<div>元素，如下所示：

<div class="container">
  <div id="section1">Section 1</div>
  <div id="section2">Section 2</div>
  <div id="section3">Section 3</div>
  <div id="section4">Section 4</div>
</div>

You can test it out here

如何隐藏使用javascript（jQuery）点击锚点href引用的div

2 个答案: