javascript - twitter bootstrap btn-group 来驱动标签内容

Question

您好，我正在尝试使用 bootstraps btn-group 实现选项卡式内容。我有一些工作代码，但我不确定这是实现它的最佳方法。

HTML:

<section class="section" id="tabContent">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="btn-group btn-group-sm btn-group-justified" data-toggle="buttons">
                    <div class="btn btn-inverse active tabber" id="submission-div">
                        <label for="submission">Submission</label>
                        <input type="radio" checked="" id="submission">
                    </div>
                    <div class="btn btn-inverse tabber" id="rules-div">
                        <label for="rules">Rules</label>
                        <input type="radio" checked="" id="rules">
                    </div>
                </div>
            </div>
        </div>
        <div id="submission-content">
            <h1>Submission content</h1>
        </div>
        <div id="rules-content" class="hide">
            <h1>Rules</h1>
        </div>
    </div>
</section>

CSS:

.hide {
    display: none;
}

JQuery:

$(document).on('click','.tabber',function(e){
    if ($("#submission-div").hasClass("active")) {
        $("#submission-content").addClass("hide");
        $("#rules-content").removeClass("hide");
    }else if ($("#rules-div").hasClass("active")){
        $("#rules-content").addClass("hide");
        $("#submission-content").removeClass("hide");
    }
});

这个 JQuery onClick 回调有效，当您阅读它时没有任何意义。我认为这是因为此 FXN 在标记中更新事件类之前被触发。

我希望有一种更好的方法来完成选项卡内容，希望不会过多更改标记，因为标记的样式是正确的。

如有任何建议，我们将不胜感激。

谢谢! 一个

Answer 1

你为什么不使用 Bootstrap Tabs使用 data-toggle="tab" 和 data-target= 属性？ (不需要 jQuery)..

演示: http://www.bootply.com/ZueoFI9iFC

<section class="section" id="tabContent">
    <div class="container">

        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="btn-group btn-group-sm btn-group-justified" 
                     data-toggle="buttons">
                    <div class="btn btn-inverse active tabber" id="submission-div"
                         data-toggle="tab" data-target="#submission-content">
                        <label for="submission">Submission</label>
                        <input type="radio" checked="" id="submission"/>
                    </div>
                    <div class="btn btn-inverse tabber" id="rules-div" 
                         data-toggle="tab" data-target="#rules-content">
                        <label for="rules">Rules</label>
                        <input type="radio" checked="" id="rules"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content">
            <div id="submission-content" class="tab-pane active">
                <h1>Submission content</h1>
            </div>
            <div id="rules-content" class="tab-pane">
                <h1>Rules</h1>
            </div>
        </div>
    </div>

</section>