javascript - 悬停 div 应该使用 jquery 出现

Question

在 hover li div 上我知道了。我的问题是默认显示第一个 div。我想显示第一个 div。谁能建议我？帮助将不胜感激

$('#menu a').hover(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.main div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.main div').each(function(){
    $(this).hide();});
}
hideContentDivs();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="nav">
        <ul id="menu">
            <li id="link1"><a href="#">Topic One</a></li>
            <li id="link2"><a href="#">Topic Two</a></li>
            <li id="link3"><a href="#">Topic Three</a></li>               
        </ul>
    </div>
    <div class="main">
        <div id="page1" class="content">
        <h1>Page 1</h1>
        <p>First section of content.</p>
        </div>
        <div id="page2" class="content">
        <h1>Page 2</h1>        
        <p>Second section of content</p>
        </div>
        <div id="page3" class="content">        
        <h1>Page 3</h1>
        <p>Third section of content.</p>
        </div>                 
    </div>
</div>

Answer 1

最初隐藏除第一个之外的 div，要忽略第一个你可以使用 jQuery :first带有 :not() 的伪选择器选择器或使用 slice()方法。

$('.main div:not(:first)').hide();
// or
$('.main div').slice(1).hide();

$('#menu a').hover(function(e) {
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main div').eq(tmp_div).show();
});

function hideContentDivs() {
  $('.main div').hide();
}

$('.main div:not(:first)').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <ul id="menu">
      <li id="link1"><a href="#">Topic One</a></li>
      <li id="link2"><a href="#">Topic Two</a></li>
      <li id="link3"><a href="#">Topic Three</a></li>
    </ul>
  </div>
  <div class="main">
    <div id="page1" class="content">
      <h1>Page 1</h1>
      <p>First section of content.</p>
    </div>
    <div id="page2" class="content">
      <h1>Page 2</h1>
      <p>Second section of content</p>
    </div>
    <div id="page3" class="content">
      <h1>Page 3</h1>
      <p>Third section of content.</p>
    </div>
  </div>
</div>

---

您也可以通过链接 hide() 来简化代码方法。

$('#menu a').hover(function(e) {
  var tmp_div = $(this).parent().index();
  $('.main div').hide().eq(tmp_div).show();
  // -------------^----
});

$('.main div:not(:first)').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <ul id="menu">
      <li id="link1"><a href="#">Topic One</a></li>
      <li id="link2"><a href="#">Topic Two</a></li>
      <li id="link3"><a href="#">Topic Three</a></li>
    </ul>
  </div>
  <div class="main">
    <div id="page1" class="content">
      <h1>Page 1</h1>
      <p>First section of content.</p>
    </div>
    <div id="page2" class="content">
      <h1>Page 2</h1>
      <p>Second section of content</p>
    </div>
    <div id="page3" class="content">
      <h1>Page 3</h1>
      <p>Third section of content.</p>
    </div>
  </div>
</div>

---

虽然最好缓存元素以在回调中引用。

var $divs =$('.main div');
$('#menu a').hover(function(e) {
  var tmp_div = $(this).parent().index();
  $divs.hide().eq(tmp_div).show();
});

// select divs except first index
$divs.slice(1).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <ul id="menu">
      <li id="link1"><a href="#">Topic One</a></li>
      <li id="link2"><a href="#">Topic Two</a></li>
      <li id="link3"><a href="#">Topic Three</a></li>
    </ul>
  </div>
  <div class="main">
    <div id="page1" class="content">
      <h1>Page 1</h1>
      <p>First section of content.</p>
    </div>
    <div id="page2" class="content">
      <h1>Page 2</h1>
      <p>Second section of content</p>
    </div>
    <div id="page3" class="content">
      <h1>Page 3</h1>
      <p>Third section of content.</p>
    </div>
  </div>
</div>