jQuery - 使用链接选择Bootstrap Nav选项卡

Question

我已经设置了Bootstrap / jQuery nav-tabs。标签本身按预期工作，但我需要在标签内容中有按钮，这些按钮也会激活下一个标签。

我添加的按钮强制标签内容处于活动状态，但标签li未更新。

我已设置JSFiddle来显示问题。

＆＃13;

＆＃13;

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">

        <li role="presentation" class="active"><a href="#next-move-home" data-toggle="tab">HOME</a></li>
        <li role="presentation"><a href="#next-move-1-0" data-toggle="tab">1.0</a></li>
        <li role="presentation"><a href="#next-move-2-0" data-toggle="tab">2.0</a></li>
        <li role="presentation"><a href="#next-move-3-0" data-toggle="tab">3.0</a></li>
        <li role="presentation"><a href="#next-move-4-0" data-toggle="tab">4.0</a></li>
      
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="next-move-home">
            <h2>Home</h2>
            <p>Content</p>
		    <a class="btn btn-default" href="#next-move-1-0" data-toggle="tab">1.0</a>
		</div>
        <div role="tabpanel" class="tab-pane fade" id="next-move-1-0">
            <h2>1.0</h2>
            <p>Content</p>
		    <a class="btn btn-default" href="#next-move-2-0" data-toggle="tab">2.0</a>
		</div>
        <div role="tabpanel" class="tab-pane fade" id="next-move-2-0">
            <h2>2.0</h2>
            <p>Content</p>
		    <a class="btn btn-default" href="#next-move-3-0" data-toggle="tab">3.0</a>
		</div>
        <div role="tabpanel" class="tab-pane fade" id="next-move-3-0">
            <h2>3.0</h2>
            <p>Content</p>
		    <a class="btn btn-default" href="#next-move-4-0" data-toggle="tab">4.0</a>
		</div>
        <div role="tabpanel" class="tab-pane fade" id="next-move-4-0">
            <h2>4.0</h2>
            <p>Content</p>
		</div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这样的事情应该这样做：

＆＃13;

＆＃13;

$(document).ready(function () {
    $(".tab-content a").click(function () {
        if (this.href.indexOf("next-move") >= 0) {
            $(".nav-tabs li.active").removeClass("active");
            $(".nav-tabs li a[href=" + this.hash + "]").parent().addClass("active");
        }
    });
});

＆＃13;

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#next-move-home" data-toggle="tab">HOME</a>
    </li>
    <li role="presentation"><a href="#next-move-1-0" data-toggle="tab">1.0</a>
    </li>
    <li role="presentation"><a href="#next-move-2-0" data-toggle="tab">2.0</a>
    </li>
    <li role="presentation"><a href="#next-move-3-0" data-toggle="tab">3.0</a>
    </li>
    <li role="presentation"><a href="#next-move-4-0" data-toggle="tab">4.0</a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="next-move-home">
         <h2>Home</h2>

        <p>Content</p> <a class="btn btn-default" href="#next-move-1-0" data-toggle="tab">1.0</a>

    </div>
    <div role="tabpanel" class="tab-pane fade" id="next-move-1-0">
         <h2>1.0</h2>

        <p>Content</p> <a class="btn btn-default" href="#next-move-2-0" data-toggle="tab">2.0</a>

    </div>
    <div role="tabpanel" class="tab-pane fade" id="next-move-2-0">
         <h2>2.0</h2>

        <p>Content</p> <a class="btn btn-default" href="#next-move-3-0" data-toggle="tab">3.0</a>

    </div>
    <div role="tabpanel" class="tab-pane fade" id="next-move-3-0">
         <h2>3.0</h2>

        <p>Content</p> <a class="btn btn-default" href="#next-move-4-0" data-toggle="tab">4.0</a>

    </div>
    <div role="tabpanel" class="tab-pane fade" id="next-move-4-0">
         <h2>4.0</h2>

        <p>Content</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;