Question

使用anchor的.hash属性作为选择器来切换元素的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>

它可以工作，但不是在页面首次加载时，首次加载时，会显示所有div。

如何隐藏除第一个之外的所有div？

请查看jsfiddle

Answer 1

在加载页面时触发第一个点击：

$('#navbar a:first').click();

<强> jsFiddle example

Answer 2

您需要从隐藏的第一个<div>开始，然后更改哪个在点击时可见。

＆＃13;

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

＆＃13;

.container > div {
    display: none;
}

#section1 {
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<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>

＆＃13;

Answer 3

您希望将第一个a元素或您想要默认的元素归零，并在其上触发click事件。这应该这样做：

$('#navbar a').click(function(e) {
    e.preventDefault(); 
    $('.container > div').hide();
    $(this.hash).show();
})
.first().trigger('click');

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<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>

如何在点击加载时隐藏除锚点href引用的第一个div之外的所有div

3 个答案: