Question

我试图阻止用户在单击当前选项卡中的按钮之前单击未选中的选项卡。任何帮助，将不胜感激。感谢。

           <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                        <li><a href="#home" class="btn btn-large btn-block btn-success disabled" data-toggle="tab" >Home</a></li>
                        <li><a href="#profile" data-toggle="tab">Profile</a></li>
                        <li><a href="#messages" data-toggle="tab">Messages</a></li>
                        <li><a href="#settings" data-toggle="tab">Settings</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="home">Write Here Tab Home Part

                            <button class="tab-button" type="submit">Hello</button>

                    </div>
                    <div class="tab-pane" id="profile">Write Here Tab Profile Part</div>
                    <div class="tab-pane" id="messages">Write Here Tab Messages Part</div>
                    <div class="tab-pane" id="settings">Write Here Tab Settings Part</div>
                </div>

JS：

<!-- Move to other tabs by clicking on the button -->
<script>

$(".tab-button").click
(
    function()
    {
        $('.nav-tabs li:eq(1) a').tab('show');

        $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled");
        $('.nav-tabs li:eq(1) a').addClass("btn btn-large btn-block btn-success disabled");
    }
);

</script>

Answer 1

您需要阻止点击事件：

$(".nav-tabs li a[data-toggle=tab]").on("click",function(e){
    e.preventDefault();
    return false;
});

Answer 2

我不清楚你想在这里实现什么，但你可以覆盖默认的标签导航行为。

$('.nav-tabs').tabs({ event: '' });

Answer 3

 .disabledTab{
pointer-events: none;
 }


<li class="disabledTab"></li>
//please use this class disabledTab to prevent click.

单击按钮转到下一个选项卡，否则不允许按下一个选项卡

3 个答案: