Question

我有以下脚本：

var SwitchTabs = function(container, tabs, activeclass, which) {
var tabContainers = $(container + ' > div');
var index = 0;
var tabnum = (which) ? parseInt(which) - 1 : 0;
tabContainers.filter(':eq(' + tabnum + ')').css({'display':'block'});
$(container + ' > ' + tabs).find('a').click(function(){
    index = $(this).parent().index();
    tabContainers.css({'display':'none'}).filter(':eq(' + index + ')').show();
    $(container + ' ' + tabs + ' ' + ' a').removeClass(activeclass);
    $(this).addClass(activeclass);
}).filter(':eq(' + tabnum + ')').click();
}

$(function(){
SwitchTabs('div.tabs', 'ul.mostpouplar', 'active', 1);
});

标记：


    <div class="tabs rrmodule">
    <h3>Popular</h3>
    <ul class="mostpopular">
        <li><a href="#">Most Viewed</a></li> 
        <li><a href="#">Most Commented</a></li>
    </ul>

    <div>
    Some content - tab 1
    </div>
    <div>
    Some content - tab 2
    </div>
    </div>

以上（根据代码）应该将类设置为第一个锚元素并在页面加载时显示第一个DIV。然后显示DIV并根据点击设置锚类。我正在使用jquery 1.4.4。由于某种原因，click不起作用，onload设置类和显示DIV都不起作用！我认为代码非常简单。有人可以帮我这个。

谢谢， →

Answer 1

有几个问题，您不应该使用JavaScript关键字which作为参数名称。此外，您将ui.mostpopular拼错为ul.mostpouplar。这是工作：

http://jsfiddle.net/magicaj/yFFaJ/2/

Answer 2

你想要这样的东西：http://jqueryui.com/demos/tabs使用jQuery UI。或jQuery工具：标签：http://flowplayer.org/tools/tabs/index.html。

Answer 3

解决方案JSFiddle :: https://jsfiddle.net/incorelabs/mg6e4ren/

实现选项卡非常简单，我已经针对您的问题修改了HTML。删除了锚标签因为它们不是必需的。

HTML

<ul>
    <li class="tab-switcher" data-tab-index="0">test1</li>
    <li class="tab-switcher" data-tab-index="1">test2</li>
    <li class="tab-switcher" data-tab-index="2">test3</li>
    <li class="tab-switcher" data-tab-index="3">test4</li>
</ul>
<div id="allTabsContainer">
    <div class="tab-container" data-tab-index="0">Some content - 1</div>
    <div class="tab-container" data-tab-index="1" style="display:none;">Some content - 2</div>
    <div class="tab-container" data-tab-index="2" style="display:none;">Some content - 3</div>
    <div class="tab-container" data-tab-index="3" style="display:none;">Some content - 4</div>
</div>

HTML De-Mystified

将“tab-switcher”类添加到每个“li”元素。
为每个“li”提供“data-tab-index”属性。
将“tab-container”类添加到每个选项卡式容器中。还为每个容器提供“data-tab-index”属性，该属性对应于“li”元素上的“data-tab-index”属性。
仅显示您想要的容器，使用“display：none”隐藏其他容器。
为选项卡式容器的所有内容提供父容器。在这个例子中，这是“allTabsContainer”div。

的jQuery

$(document).ready(function () {

    var previousActiveTabIndex = 0;

    $(".tab-switcher").on('click', function () {

        var tabClicked = $(this).data("tab-index");

        if(tabClicked != previousActiveTabIndex) {

            $("#allTabsContainer .tab-container").each(function () {

                if($(this).data("tab-index") == tabClicked) {

                    $(".tab-container").hide();
                    $(this).show();
                    previousActiveTabIndex = $(this).data("tab-index");
                    return;

                }
            });
        }
    });
});

jQuery De-Mystified

“tab-switcher”上的点击监听器在“document.ready”上初始化。
变量“previousActiveTabIndex”会保留上一个活动标签的轨道，这样如果我们一次又一次按下相同的标签，则可以忽略它。
我们在“tab-container”上运行一个EACH循环。这样做是为了知道应该显示哪个选项卡。如果每个上的“data-tab-index”数据属性匹配，我们将显示该选项卡。
我们将“data-tab-index”的值保存在“previousActiveTabIndex”中，这有助于我们跟踪上一个被点击的标签。

如果有疑问或有人有建议，请对帖子发表评论。

jquery选项卡切换器

3 个答案: