Question

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

jQuery标签切换代码 忽略第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();
    });
});

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

这对我有用，除了没有“＃tab2”和“＃tab3”内容div。索引代码不起作用，因为索引是数字的，你试图匹配内容div，它将不匹配，因为div有字符串id

修改

您可以使用以下内容显示所有子元素：

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

修改2

:last选择器正在#tab-content内找到最深的div元素并显示它，即：<div id="Social-Fun" style="display: none;">

这就是你没有看到任何东西的原因。

您可以为每个div添加一个类，例如class='country'，然后您可以执行：

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

破碎的jQuery Tab切换器

1 个答案: