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

我有几块分离成自己的div的文本块。我在导航栏中也有几个链接，它们通过锚链接引用这些div。点击后，我想隐藏除点击链接引用的其他div之外的所有其他div。我有：如何隐藏锚点href点击javascript（jQuery）引用的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>

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

我很好，实际上隐藏/显示使用CSS的每一段文字，但我无法弄清楚如何使用链接的href属性引用div名称。

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

来源

2011-06-12 isTravis

可以使用锚的.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。

来源

2011-06-12 21:51:25

哇 - 太好了。这正是我寻找的功能。我不知道我可以使用'.hash'作为选择器 - 完美！谢谢！ – isTravis 2011-06-12 21:56:19

@tsrich - yup，因为它与ID选择器相同，所以非常方便*和*便宜，双赢:) – 2011-06-12 21:57:05

试试这个：

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

你可以看到一个例子here。

来源

2011-06-12 21:48:52 icktoofay

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

回答

相关问题