Question

这是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类在鼠标悬停时变为活动状态。但是，tab-content不会从display：none更改为display：block。：/

Answer 1

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

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

jQuery选项卡在悬停时不激活

1 个答案:

demo jsBin