Question

我的页面中有6个标签，它们是自定义标签，来自我基于.PSD文件开发的html主题。如果为false，则每个选项卡必须打开带有此数据属性data-tab-active="true"的“tab-content”，然后在CSS中设置display：none;到内容。我的主要问题是，在单击的选项卡中将类设置为“active”，并从上一个选项卡中删除，然后在tab-content的data-attribute中设置为true。

这里是我的jsfiddle： http://jsfiddle.net/cout1ofr/1/

HMTL：

<div class="tabs-container">
    <div class="tabs-btn">
        <ul>
            <li class="active"><a href="#tab1">1</a></li>
            <li><a href="#tab2">2</a></li>
            <li><a href="#tab3">3</a></li>
            <li><a href="#tab4">4</a></li>
            <li><a href="#tab5">5</a></li>
            <li><a href="#tab6">6</a></li>
        </ul>
    </div>
    <div class="tabs-content-container">
        <div class="tab-content" data-tab-active="true" id="tab1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p>
        </div>

        <div class="tab-content" data-tab-active="false" id="tab2">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p>
        </div>

         <div class="tab-content" data-tab-active="false" id="tab3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p>
        </div>

         <div class="tab-content" data-tab-active="false" id="tab4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p>
        </div>

         <div class="tab-content" data-tab-active="false" id="tab5">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p>
        </div>

         <div class="tab-content" data-tab-active="false" id="tab6">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p>
        </div>
    </div>
</div>

CSS：

.tabs-container {
    width: 100%;
    position: relative;
}

.tabs-container .tabs-btn {

}

.tabs-container .tabs-btn ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.tabs-btn ul li {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: #ddd;
    border: 1px solid #eee;
    position: relative;
}

.tabs-btn li.active:after {
    content: "";
    display: block;
    width: 0;
    border-width: 7px 7px 0px;
    border-style: solid;
    border-color: #ddd transparent;
    position: absolute;
    bottom: -7px;
    margin-left: 50%;
    left: -5px;
}

.tabs-btn li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 80px;
    text-decoration: none;
}
/* tab content */
.tabs-content-container {
    width: 100%;
    position: relative;
}

.tabs-content-container .tab-content {
    max-width: 300px;
    margin: 0 auto;
}

.tabs-content-container .tab-content[data-tab-active='true'] {
    display: block;
}

.tabs-content-container .tab-content[data-tab-active='false'] {
    display: none;
}

Answer 1

/* Get DOM elements */
var navElement     = $('.tabs-btn li a');
var contentElement = $('.tabs-content-container .tab-content');

/* Notify about a click event */
navElement.click(function(e) {
    /* stop browser from following clicked link */
    e.preventDefault();

    /* get content div id */
    var href = $(this).attr('href');

    /* turn off all nav links and turn on the clicked one */
    navElement.parent().removeClass('active');
    $(this).parent().addClass('active');

    /* turn off all content and turn on the clicked on */
    contentElement.attr('data-tab-active', 'false');
    $(href).attr('data-tab-active', 'true');
});

演示：http://jsfiddle.net/cout1ofr/5/

如果要在网页上使用ajax并动态切换内容，可以使用jQuery on方法。

Answer 2

如果您正在寻找不需要JQuery的解决方案，请查看：http://jsfiddle.net/cout1ofr/6/

对HTML进行了一些调整，以添加ID和数据属性以及此JavaScript：

// Display tab by id
function displayTab(tabId) {
    var tabsContainer = document.getElementById('my-tabs-content');
    var tabs = tabsContainer.childNodes;
    var i = 0;
    var len = tabs.length;
    var tab = document.getElementById(tabId);

    for (; i < len; i++) {
        if (tabs[i].getAttribute && tabs[i].getAttribute('data-tab-active')) {
            tabs[i].setAttribute('data-tab-active', 'false');
        }
    }
    tab.setAttribute('data-tab-active', 'true');
}

// Change tab to element clicked.
function setTab(e) {
    var ul = this.parentNode.parentNode;
    var lis = ul.childNodes;
    var i = 0;
    var len = lis.length;
    for (; i < len; i++) {
        lis[i].className = '';
    }
    this.parentNode.className = 'active';

    displayTab(this.getAttribute('data-tab-id'));
}

// Set up event listeners.
var tabs = document.getElementById('my-tabs');
var lis = tabs.childNodes;
var i = 0;
var len = lis.length;
for (; i < len; i++) {
    if (lis[i].firstChild) {
        lis[i].firstChild.addEventListener('click', setTab);
    }
}

Answer 3

检查我的解决方案： demo

var tabsContents = $('.tab-content');
var tabsButtons = $('.tabs-btn li').click(function() {
    var tabButton = $(this),
        tabId = $(this).find('a').attr('href');

    tabsButtons.removeClass('active');
    tabButton.addClass('active');

    tabsContents.attr('data-tab-active', 'false')
    tabsContents.filter(tabId).attr('data-tab-active', 'true');

});

Answer 4

尝试这样的事情

$('.tabs-btn a').on('click',function(e){
    e.preventDefault();
    var _this = $(this);
    $('.tabs-btn li').removeClass('active');
    _this.parent().addClass('active');
    var _index = $('.tabs-btn a').index(_this);
    $('.tab-content').attr('data-tab-active', 'false');
    $($('.tab-content').get(_index)).attr('data-tab-active', 'true');
});

在标签之间插入活动类

4 个答案: