onhover div应该使用jquery出现

Question

在悬停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();

＆＃13;

＆＃13;

$('#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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

尽管在回调中缓存元素以进行引用会更好。

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以添加$（＆＃34;＃page1＆＃34;）。show（）;结束它会将第一个div显示为默认值。

＆＃13;

＆＃13;

$('#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();
$("#page1").show();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用css样式。

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

function hideContentDivs(){
    $('.main div').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" style="display: block">
        <h1>Page 1</h1>
        <p>First section of content.</p>
        </div>
        <div id="page2" class="content" style="display: none">
        <h1>Page 2</h1>        
        <p>Second section of content</p>
        </div>
        <div id="page3" class="content" style="display: none">        
        <h1>Page 3</h1>
        <p>Third section of content.</p>
        </div>                 
    </div>
</div>