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>

Answer 2

我觉得整体解决方案可能更清晰，但是如果你想让你的JQ变得有意义并尽可能少地改变，你可以这样做：

$(".tabber").click(function(){
 if ($(this).is("#submission-div")) {
     $("#submission-content").removeClass("hide");
     $("#rules-content").addClass("hide");
 }else if ($(this).is("#rules-div")){
     $("#rules-content").removeClass("hide");
     $("#submission-content").addClass("hide");
 }
});

twitter bootstrap btn-group驱动标签内容

2 个答案: