javascript - jQuery hover tabs - Stack Overflow

admin管理员组

文章数量:1394228

I'm trying to create simple jQuery tabs. The tab content should be displayed on hover. So I'm trying following code. The problem is that if you hover fast enough on the tab titles, you can still see the other tabs content before the right tab content is displayed.

Demo:

Please see the Fiddle link to see the problem: /

Code:

jQuery(document).ready(function($) {
    $(".tab-titles li").hover(function() {
        $(".tab-content").hide();
        $(".tab-titles li").removeClass('active');                  
        $(this).addClass("active");                 
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });
});

I'm trying to create simple jQuery tabs. The tab content should be displayed on hover. So I'm trying following code. The problem is that if you hover fast enough on the tab titles, you can still see the other tabs content before the right tab content is displayed.

Demo:

Please see the Fiddle link to see the problem: http://jsfiddle/0v9nhxu3/

Code:

jQuery(document).ready(function($) {
    $(".tab-titles li").hover(function() {
        $(".tab-content").hide();
        $(".tab-titles li").removeClass('active');                  
        $(this).addClass("active");                 
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });
});

• javascript
• jquery
• html
• css

Share Improve this question Follow asked May 5, 2015 at 8:48 user1355300user1355300 4,9971818 gold badges5050 silver badges7373 bronze badges 2

• why downvote? please enlighten me whats wrong with the question? – user1355300 Commented May 5, 2015 at 8:57
• I agree this question is fine +1 – Jack Commented May 5, 2015 at 9:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use stop() before fadeIn to stop the current running animation.

jQuery(document).ready(function($) {
    $(".tab-titles li").hover(function() {
        $(".tab-content").hide();
        $(".tab-titles li").removeClass('active');                  
        $(this).addClass("active");                 
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).stop().fadeIn();
        return false;
    });
});

Fiddle Demo

    jQuery(document).ready(function($) {
        $(".tab-titles li").hover(function() {
            $(".tab-content").removeClass('tab-show');
            $(".tab-titles li").removeClass('active');                  
            $(this).addClass("active");                 
            var selected_tab = $(this).find("a").attr("href");
            $(selected_tab).addClass("tab-show");
            return false;
        });
    });

http://jsfiddle/0v9nhxu3/9/

Quick way and customizable

$(function(){
   $('.tabs li').hover(function(){
     //hover in
       var index= $(this).index();
       $('.tabcontainer div').eq(index).show(500);
   },function(){
     //hover out
       $('.tabcontainer div').hide(500);
   });
})

.tabcontainer{
    padding: 20px;
 }
.tabcontainer div{
  display: none;
  padding: 10px;
  border: thin solid #ccc;
}
.tabs{
  margin: 0;
  padding: 0;
}
.tabs li{
   list-style: none;
   padding: 10px;
   display: inline-block;
  cursor: pointer;
}
.tabs li:hover{
  background-color: #ccc;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabcontainer">
    <ul class="tabs">
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>      
    </ul>
    <div>Tab 1 content</div>
    <div>Tab 2 content</div>
    <div>Tab 3 content</div>
    <div>Tab 4 content</div>  
</div>

本文标签： javascriptjQuery hover tabsStack Overflow