Question

我现在有了这个代码，目的是创建标签：

    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#custom-tab-0-8cf04a9734132302f96da8e113e80ce5" data-toggle="tab">Home</a>
        </li>
        <li>
            <a href="#custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" data-toggle="tab">Profile</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="custom-tab-0-8cf04a9734132302f96da8e113e80ce5" class="tab-pane active" tabindex="-1">
            Content goes here<br>
        </div>
        <div id="custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" class="tab-pane" tabindex="-1">
            Nothing comes here<br>
        </div>
    </div>

CSS:

ul.nav.nav-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-top: 2%;
}

ul.nav.nav-tabs li {
    float: left;
}
ul.nav.nav-tabs a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
li.active {
    background-color: #ccc;
}

如何使用jQuery创建多个选项卡，显示我单击的TAB的内容并添加一个活动的类？

注意：我对html结构的改动不多，因为它是一个WordPress站点，我使用短代码生成选项卡。我只是设计并尝试了jQuery。

现在我可以同时看到所有标签的所有内容。但我想要的只有一个标签处于活动状态而其他标签已关闭。当我单击下一个选项卡时，它应该在线显示该选项卡的内容，使该类处于活动状态并停用上一个活动选项卡所具有的活动类。

当我点击每个TAB时，我开始使用此代码来测试功能，但我不认为使用子选择器是一个好习惯，因为我可能有两个以上的标签：

$(document).ready(function()  {
    $("ul.nav.nav-tabs li:first-child a").click(function(){
        alert("You clicked on the first-child");
    });
    $("ul.nav.nav-tabs li:nth-child(2) a").click(function(){
        alert("You clicked on the second child");
    });            
});

提前致谢。

Answer 1

查看Visiblary：

/*
 * params:
 *     - selector: jQuery selector
 *     - init: function which gets the Visiblary object to initialize it
 *     - events: object/array
 *         - root: a selector which contain all the affected tags, default is "body"
 *         - types: array, which contains the string representation of the events
 *         - selector: inner selector to identify the target set
 *         - handler: handler function
 */
function Visiblary(params) {
    var instance = this;
    if (!params.toggleClass) {
        params.toggleClass = "invisible";
    }
    this.hideAll = function() {
        $(params.selector).addClass(params.toggleClass);
        return instance;
    };
    this.hideSubset = function(subsetSelector) {
        $(params.selector).filter(subsetSelector).addClass(params.toggleClass);
        return instance;
    };
    this.hideOnly = function(subsetSelector) {
        $(params.selector).not(subsetSelector).removeClass(params.toggleClass);
        $(params.selector).filter(subsetSelector).addClass(params.toggleClass);
        return instance;
    };
    this.showAll = function() {
        $(params.selector).removeClass(params.toggleClass);
        return instance;
    };
    this.showSubset = function(subsetSelector) {
        $(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
        return instance;
    };
    this.showOnly = function(subsetSelector) {
        $(params.selector).not(subsetSelector).addClass(params.toggleClass);
        $(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
        return instance;
    };
    this.invert = function() {
        $(params.selector).each(function() {
            $(this).hasClass(params.toggleClass) ? $(this).removeClass(params.toggleClass) : $(this).addClass(params.toggleClass);
        });
        return instance;
    };
    if (!!params.init) {
        params.init(this);
    }
    if (!!params.events) {
        for (var event in params.events) {
            $(!!params.events[event].root ? params.events[event].root : "body").on(params.events[event].types.join(" "), params.events[event].selector, params.events[event].handler);
        }
    }
    return instance;
}

通过它，您可以实现您想要的和更多。 invisible是一个CSS类：

.invisible {
    display: none;
}

编辑：

此文件应该是位于加载jQuery的script下方的script标记内的单独.js文件。建议在Visiblary的加载事件中初始化$(function() {})个对象。例如：

$(function() {
    //New visiblary object, things will be callable using visiblary.
    var visiblary = Visiblary({
        //Elements corresponding to selector
        selector: "#chat-window > .chat-content",
        //In this example we have a single event, which is clicking on
        //a .chat-tab-set child of #chat-window. This will trigger showOnly
        //with the index corresponding data-index
        events: [
            {
                root: "#chat-window > .chat-tab-set",
                types: ["click"],
                selector: ".chat-tab",
                handler: function() {
                    visiblary.showOnly(":eq(" + $(this).data("index") + ")");
                }
            }
        ]
    });
});

Answer 2

您可以使用index(element)方法获取在匹配元素上的集合中单击的元素的索引。请注意，它返回零位置。

从匹配的元素中搜索给定元素。

//Hide inactive tab content
$('.tab-content :not(.active)').hide();

//Cache elements 
var navigationAnchorElements = $("ul.nav.nav-tabs li a");

//bind click handler
navigationAnchorElements.click(function(e) {
    e.preventDefault();

    //remove active class and hide content pane
    $('.tab-content .active').removeClass('active').hide();

    //Show current active content pane and add Class
    $(this.getAttribute("href")).addClass('active').show();

    //remove active class from parent elemets
    $("ul.nav.nav-tabs li.active").removeClass('active');

    //add active class to current element
    $(this).parent().addClass('active');

    var index = navigationAnchorElements.index(this) + 1;
    alert("You clicked on the " + index + " child" );
});

$(document).ready(function() {
  var navigationAnchorElements = $("ul.nav.nav-tabs li a");
  $('.tab-content :not(.active)').hide();
  navigationAnchorElements.click(function(e) {
    e.preventDefault();
    $('.tab-content .active').removeClass('active').hide();
    $(this.getAttribute("href")).addClass('active').show();

    $("ul.nav.nav-tabs li.active").removeClass('active');
    $(this).parent().addClass('active');

    var index = navigationAnchorElements.index(this) + 1;
    //  alert("You clicked on the " + index + " child" + this.dataset.id);
  });
});

ul.nav.nav-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 2%;
}
ul.nav.nav-tabs li {
  float: left;
}
ul.nav.nav-tabs a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
li.active {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#custom-tab-0-8cf04a9734132302f96da8e113e80ce5" data-toggle="tab">Home</a>
  </li>
  <li>
    <a href="#custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" data-toggle="tab">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div id="custom-tab-0-8cf04a9734132302f96da8e113e80ce5" class="tab-pane active" tabindex="-1">
    Content goes here
    <br>
  </div>
  <div id="custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" class="tab-pane" tabindex="-1">
    Nothing comes here
    <br>
  </div>
</div>

如何使用jquery创建动态选项卡

2 个答案: