0

肝脏演示： https ://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html

jQuery Tab Switch 代码 忽略第 2-6 行

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'-300px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-0px'}, {queue: false, duration: 500});
    });
    $('#tab-content div').hide();
    $('#tab-content div:last').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).find('li').addClass("current");
        $('#tab-content div').hide();

        var indexer = $(this).index(); //gets the current index of (this) which is #nav li
        $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
    });
});

我在我的网站中实现 jQuery 选项卡切换时遇到问题：

"$(this).find('li').addClass("current");"

用于查找“a”，但是我需要它来更改 li 的类而不是 a。

唯一显示的选项卡切换内容是顶部第二个的一部分，而不是全部。我现在很困惑，真的可以得到一些帮助。

更新：

    $('#Info-Side-Tabs li').removeClass("current");

Seems to be removing the class upon clicking, however

    $(this).find('li').addClass("current");

Does not seem to add the class to the new clicked tab.

    $("#tab-3").toggle(function () {
        // $('#Map-Selection-Info').animate({right:'-976px'}, {queue: false, duration: 500});
        $('#Map-Selection-Info').animate({marginLeft: '976px'}, 1000).addClass('current');
    }, function () {
        $('#Map-Selection-Info').animate({right:'670px'}, {queue: false, duration: 500});
    });

I am trying to apply the above to the 'Hide This' tab, so when you click on it, it move further right out of view and recliick to show.

Full Script So Far:
$(function () {
    $("#tab-3").toggle(function () {
        // $('#Map-Selection-Info').animate({right:'-976px'}, {queue: false, duration: 500});
        $('#Map-Selection-Info').animate({marginLeft: '976px'}, 1000).addClass('current');
    }, function () {
        $('#Map-Selection-Info').animate({right:'670px'}, {queue: false, duration: 500});
    });
    $('#tab-content div').hide();
    $('#tab-content div:last').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).find('li').addClass("current");
        $('#tab-content div').hide();
        var href = $(this).find('a').attr("href");
        $('#tab-content div' + href).fadeIn().find('*').show();
    });
});
4

1 回答 1

1

删除.find('li').

您不需要这样做，因为在 li 元素上触发了 click 事件。$(this)li 元素也是如此。

然后你做：

$('#Info-Side-Tabs li').click(function() {
    $('#Info-Side-Tabs li').removeClass("current");
    $(this).addClass("current");
    $('#tab-content div').hide();
    var href = $(this).find('a').attr("href");
    $('#tab-content div' + href).fadeIn()
});

That works for me, other than there being no "#tab2" and "#tab3" content divs. The index code wouldnt work because the index is numerical and you are trying to match a content div, it won't match because the divs have string id's

Edit

You can show all child elements using the following:

$('#tab-content div' + href).fadeIn().find('*').show();

Edit 2

The :last selector is finding the deepest div element inside #tab-content and showing it, which is: <div id="Social-Fun" style="display: none;">

That's why you don't see anything.

You could add a class to each div, something like class='country' and then you could do:

$('#tab-content div.country').last().show()

于 2013-03-30T18:21:58.467 回答