1

这是html：

<div id="wrapper">
 <ul class="tabs">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li class=""><a href="#tab2">Tab 2</a></li>
    <li class=""><a href="#tab3">Tab 3</a></li>     
 </ul>
 <div class="tab-container">
 <div id="tab1" class="tab-content" style="display: none; ">     
  <h2>Title</h2>
  <p>Text</p>
  <p><a href="http://fakelink.html"><img src="btn.png"></a></p>
 </div>
 </div>
 <div id="tab2" class="tab-content" style="display: none; ">     
  <h2>Title</h2>
  <p>Text</p>
  <p><a href="http://fakelink.html"><img src="btn.png"></a></p>
 </div>
 </div>
<div id="tab3" class="tab-content" style="display: none; ">     
  <h2>Title</h2>
  <p>Text</p>
  <p><a href="http://fakelink.html"><img src="btn.png"></a></p>
 </div>
 </div>  
 </div>
 </div>

脚本：

(function($) {

$(document).ready(function() {
$(".tab-content").hide();
 $("#tab1").show(); 
//On Click Event
$("ul.tabs li").mouseover(function() {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab-content").hide(); 
    var activeTab = $(this).find("a").attr("href");
     $(activeTab).fadeIn();
    return false;

});
    });
    })(jQuery);

选项卡一切正常，当我将鼠标悬停时，li 类变为活动状态。但是选项卡内容不会从 display:none 更改为 display:block。：/

4

1 回答 1

1

演示 jsBin

jQ：

(function($) {

  $(document).ready(function() {
    
     $(".tab-content").hide();
     $("#tab1").show(); 

     $("ul.tabs li").mouseover(function() {
       
        var i = $(this).index();
       
        $("ul.tabs li").removeClass("active"); 
        $(this).addClass("active"); 
       
        $(".tab-content").hide(); 
       $(".tab-content").eq(i).fadeTo(300,1);
       
        return false;  
     });
    
  });
  
})(jQuery);

固定的HTML：（我删除了 ID 和其他不需要的东西。）

<div id="wrapper">
  
   <ul class="tabs">
    <li><b>Tab 1</b></li>
    <li><b>Tab 2</b></li>
    <li><b>Tab 3</b></li>     
   </ul>
    
</div>
    
<div class="tab-container">
    
    <div class="tab-content" style="display: none; ">     
       <h2>Title1</h2>
       <p>Text1</p>
       <p><a href="http://fakelink.html"><img src="btn.png"></a></p>
    </div>

    
    <div class="tab-content" style="display: none; ">     
       <h2>Title2</h2>
       <p>Text2</p>
       <p><a href="http://fakelink.html"><img src="btn.png"></a></p>
   </div>
    

  
   <div class="tab-content" style="display: none; ">     
      <h2>Title3</h2>
      <p>Text3</p>
      <p><a href="http://fakelink.html"><img src="btn.png"></a></p>
   </div>

</div>
于 2012-04-04T19:10:41.820 回答