javascript - 在选项卡之间插入事件类

Question

我的页面中有 6 个选项卡，它们是自定义选项卡，来 self 基于 .PSD 文件开发的 html 主题。 每个选项卡都必须打开一个带有此数据属性的“tab-content”data-tab-active="true"如果为 false，则在 CSS 中此设置显示:无；到内容。我这里的主要问题是在单击的选项卡上设置类“事件”，然后从上一个选项卡中删除，然后在选项卡内容的数据属性中设置为真。

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

HTML:

<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/

您可以使用 jQuery on如果你打算在你的网页上使用 ajax 并动态切换内容。