我有引导选项卡导航，在页面索引上工作正常.php，目前当我单击非任何选项卡时，页面的 url 保持不变，我想知道有没有办法我可以更改页面的 URL，每当单击选项卡时，以便我可以跟踪用户选择的选项卡。
例如：如果用户单击选项卡 A，则 url 可能会变为index.php？tab=A
或如果用户单击选项卡 B，则 URL 可能会更改为index.php？tab=B
<ul class="nav nav-tabs ">
<li class="active col-md-3">
<a href="#tab_default_1" data-toggle="tab" > A </a>
</li>
<li class="col-md-3">
<a href="#tab_default_2" data-toggle="tab" > B </a>
</li>
</ul>
<div class="tab-pane active" id="tab_default_1">
</div>
<div class="tab-pane" id="tab_default_2">
</div>
您需要
用这个更改a标签：
<a href="index.php#tab_default_1" data-toggle="tab" > A </a>
<a href="index.php#tab_default_2" data-toggle="tab" > B </a>
你试过这个吗？
使用选项卡激活后触发的"display.bs.tab"事件获取单击的选项卡，并将单击的选项卡"href"保存到本地存储，以便以后通过从本地存储获取它并手动打开它来使其处于活动状态。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save current clicked tab in local storage
localStorage.setItem('lastActiveTab', $(this).attr('href'));
});
//get last active tab from local storage
var lastTab = localStorage.getItem('lastActiveTab');
alert(lastTab +"tab was last active")
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>