Power By 专否社区

jQuery tabs not activating on hover

Go To StackoverFlow.com

1

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. :/

2012-04-04 18:56
by user1029779
$(".tab-content").show() - zod 2012-04-04 19:03
When I throw it in http://jsfiddle.net/erffJ/ it does work - Jesse van Assen 2012-04-04 19:03
@zod The $(activeTab).fadeIn(); takes care of that - Jesse van Assen 2012-04-04 19:04
Well then I'm stumped why it is not working. :/ I'll double check what other scripts are running on the page - user1029779 2012-04-04 19:07

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>
2012-04-04 19:10
by Roko C. Buljan
Thank you kind sir that worked like a charm - user1029779 2012-04-04 19:23
@user1029779 Glad I could help. Thank you! Happy codin - Roko C. Buljan 2012-04-04 20:41
How do I get it so the first tab's content shows when the page loads? When they load right now the tabs are there but the content is blank - user1029779 2012-04-09 07:57
I marked in the JS the changed line. Take a look! http://jsbin.com/ebedaj/2/edi - Roko C. Buljan 2012-04-09 09:37
Sweet, thanks, and now I learned a new jquery function. I'm starting to like this site - user1029779 2012-04-09 18:20
@user1029779 I adore this site too. :) Nice people all around - Roko C. Buljan 2012-04-10 09:54
Ads