1

代码摘录：http: //jsfiddle.net/chrisloughnane/9AjfU/

完整的代码将.tabs和所有其他元素放在一个 AJAX 填充的 jQuery UI 模式中，并且它工作得很好。

在这里，我有每个 jQuery slideUp()与您悬停的选项卡无关的div和slideDown()与之相关的div。

我想知道将我所有单独的 jQueries 合并为一个的最佳方法是什么。

该函数all()存在是因为我在 jQuery UI 模式对话框中有这个：

$('#your-dialog-id').dialog({
    open: function(event, ui) {
    $('.scroll-box').css({'max-height': bottomPosition-150, 'overflow-y': 'scroll'});
    all();}, //etc.

在每个 jQuery.on("mouseover",中作为 div 存在，用于动态添加。我还没有把它们拿走，因为我计划完全重写。

4

3 回答 3

2

试试这个 - http://jsfiddle.net/9AjfU/2/

HTML

<ul>
    <li class='all'>all</li>
    <li class='musicselect'>music</li>
    <li class='sportselect'>sport</li>
    <li class='artsselect'>arts</li>
    <li class='generalselect'>general</li>
</ul>

jQuery

$('.tabs li').on("mouseover", function(){
    $('.general, .music, .sport, .arts').slideUp();
    $('.' + $(this).attr("class").replace("select", "") ).stop(true, true).slideDown();
    $('.tabs li').css('color', '#fff');
    $(this).css('color', '#66CBFF');
});
于 2012-07-13T19:51:13.860 回答
2

试试这个，你可以在li标签中添加 helper id 属性：

<ul>
    <li class='all'>all</li>
    <li id="music"    class='musicselect'>music</li>
    <li id="sport"    class='sportselect'>sport</li>
    <li id="arts"     class='artsselect'>arts</li>
    <li id="general"  class='generalselect'>general</li>
</ul>

js：

$('ul li').on("mouseover", function(){
    $('div:not(.tabs)').slideUp();
    $('.' + this.id).stop(true, true).slideDown();
    $('.tabs li').css('color', '#fff'); // or $('.tabs li').addClass('white'); 
    $(this).css('color', '#66CBFF');
})

演示

于 2012-07-13T19:55:23.640 回答
2

这是我想出的完整的 JavaScript 代码。这样，您根本不必更改 HTML。

$('.all').css('color', '#66CBFF');

$('div.tabs').on('mouseover', 'li', function (e) {
    var $this = $(this),
        $notTabs = $('div').not('.tabs'),
        className = e.target.className,
        tabClass = className.replace(/select/, '');

    $notTabs.not(tabClass).slideUp();
    if ($this.hasClass('all')){
        $notTabs.slideDown();
    } else {
        $('.' + tabClass).stop(true, true).slideDown();
    }
    $('div.tabs li').css('color', '#fff');
    $this.css('color', '#66CBFF');
});

您可以在此处查看示例http://jsfiddle.net/g2xg7/1/

您应该记住的是，如果您必须向li选项卡元素添加类，这将不起作用。

于 2012-07-13T20:31:09.050 回答