Question

Here is the 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>

Script:

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

Everything works fine for the tabs, the li class changes to active when I mouseover. However the tab-content does not change from display:none to display:block. :/

Answer 1

demo jsBin

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

THe FIXED HTML: (I removed ID and other unneeded stuff.)

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