jQuery Tab切换器上的悬停事件，而不是点击

我有一个简单的Tab切换器，现在你点击一个标签来切换它，但我想改为它悬停切换。jQuery Tab切换器上的悬停事件，而不是点击

下面是代码和的jsfiddle现在它显示在行动click事件http://jsfiddle.net/jasondavis/p95nJ/

jQuery(document).ready(function($) { 

    //tabs 
    $("ul.tabrow li:first").addClass("active").show(); //Activate first tab 
    $(".tab-content div:first").show(); //Show first tab content 
    //On Click Event 
    $("ul.tabrow li").click(function() { 
     $("ul.tabrow li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab-box").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return false; 
    }); 

});

如果你能帮助我真的很感激它。我不想使用jQueryUI的

的HTML

<div class="tab-wrap"> 
    <ul class="tabrow"> 
     <li class=""><a href="#tab_tags">Tags</a></li> 
     <li class=""><a href="#tab_recent">Recent Articles</a></li> 
     <li class="active"><a href="#tab_tools">Tools</a></li> 
    </ul> 


    <div class="tab-content"> 
     <div id="tab_tags" class="tab-box" style="display: none; "> 
      <div class="taglist"> 
       <ul id="tag-list"> 
        <li><a href="/tag/php/" title="View all 1 posts filed under PHP">PHP</a></li> 
        <li><a href="/tag/personal/" title="View all 1 posts filed under Personal">Personal</a></li> 
        <li><a href="/tag/wordpress/" title="View all 1 posts filed under Wordpress">Wordpress</a></li> 
       </ul> 
      </div> 
      <div class="clear"> 
      </div> 
      <a href="http://www.codedevelopr.com/archives/" id="tag-to-archive">View All Tags →</a> 
     </div> 


     <div id="tab_recent" class="tab-box" style="display: none; "> 
      <ul> 
       <li class="widget"><a href="/wordpress-custom-editor-quicktag-buttons/" title="WordPress Custom Editor Quicktag Buttons">WordPress Custom Editor Quicktag Buttons</a></li> 
       <li class="widget"><a href="/welcome/" title="Welcome to CodeDevelopr">Welcome to CodeDevelopr</a></li> 
      </ul> 
     </div> 


     <div id="tab_tools" class="tab-box" style="display: block; "> 
      Coming Soon. In the mean time subscribe to the <a href="http://feeds.feedburner.com/codedevelopr">RSS Feed</a> 
     </div> 
    </div> 
</div>

来源

2012-01-16 JasonDavis

变化

$("ul.tabrow li").click(function() {})

到

$("ul.tabrow li").hover(function() {})

来源

2012-01-16 03:35:08 Michal

这似乎是做的伎俩感谢 – JasonDavis 2012-01-16 03:38:21

您应该使用.hover方法。见http://jsfiddle.net/p95nJ/1/

$("ul.tabrow li").hover(function() { 
     $(this).addClass("active"); //Add "active" class to selected tab 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return false; 
    }, function() { 
     $("ul.tabrow li").removeClass("active"); //Remove any "active" class 
     $(".tab-box").hide(); //Hide all tab content 
     return false; 
    });

来源

2012-01-16 03:34:09

感谢，一两件事，当你将鼠标悬停一个项目，我需要这个项目一直处于开启状态，除非一个不同的项目徘徊，那会更难吗？ – JasonDavis 2012-01-16 03:36:06

请参阅@ Michal的答案然后:-) – 2012-01-16 03:39:10

$("ul.tabrow li").hover(function() { $(this).find("a").click();});

来源

2014-08-15 10:28:48

jQuery Tab切换器上的悬停事件，而不是点击

回答

相关问题