jQuery悬停选项卡

Question

我正在尝试创建简单的jQuery选项卡。当鼠标悬停在选项卡标题上时，应该显示选项卡内容。因此，我正在尝试以下代码。问题是，如果您在选项卡标题上快速悬停，您仍然可以看到右侧选项卡内容显示之前的其他选项卡内容。

演示：

请查看Fiddle链接以查看问题： http://jsfiddle.net/0v9nhxu3/

代码：

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

- user1355300

---

为什么要踩我？请告诉我这个问题有什么问题吗？ - user1355300

我同意这个问题很好 +1 - Jack

Answer 1

在使用 fadeIn 动画之前，使用 stop() 停止当前正在运行的动画。

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

- anpsmn

---

顺便提一下，在这里使用hover()方法的in/out处理程序似乎不合适。 - A. Wolff

@A.Wolff，有更好的解决方案吗？谢谢。 - user1355300

@user1355300 只需将 hover 替换为 mouseover，例如：http://jsfiddle.net/0v9nhxu3/10/ - A. Wolff

@user1355300 将 hover 替换为 mouseover，并将 $(selected_tab).fadeIn(); 替换为 **$(selected_tab).fadeIn(.5);**。 - ashishraaj

Answer 2

    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.net/0v9nhxu3/9/

- Vishwajeet Bose

Answer 3

快速且可定制的方式。

$(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.com/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>

- Ifeanyi Chukwu