Bootstrap 標籤頁(Tab)外掛 跳轉B頁面相應id的頁面
阿新 • • 發佈:2019-01-27
js是以前查詢使用的,由於時間過長已忘記哪裡借用,還望見諒
Bootstrap 標籤頁(Tab)外掛:任何頁面指定的tab連結,跳去b頁面指定的tab
之前寫個導航程式碼要求跳轉其他頁面指定的tab,調查很久找到一個支援bootstrap的tab跳轉,無需在填寫id,是利用Bootstrap 標籤頁(Tab)外掛的data-toggle="tab"來對應相應的id跳轉
程式碼:
導航欄:
ps:注意二級選單跳轉tab標籤的相應id
<ul class="nav navbar-nav"> <li class="active"> <span><a href="#">首頁</span></a> </li> <li class="dropdown"> <span><a href="#">q</a></span> <ul class="dropdown-menu"> <li><a href="#id">ss</a></li> <li><a href="#id">ss</a></li> <li><a href="#id">dd</a></li> </ul> </li> <li> <span><a href="#id">2</a></span> </li> <li class="dropdown"> <span><a href="#">3</a></span> <ul class="dropdown-menu"> <li><a href="#id">a/a></li> <li><a href="#id">v</a></li> <li><a href="#id">c</a></li> </ul> </li> <li class="dropdown"> <span><a href="#">44</a></span> <ul class="dropdown-menu"> <li><a href="#id">a</a></li> <li><a href="#id">b</a></li> <li><a href="#id">c</a></li> </ul> </li> </ul>
b頁面指定的tab
<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"> aa</a></li> <li><a href="#ios" data-toggle="tab">bb</a></li> <li><a href="#jmeter" data-toggle="tab">cc </a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>ssssssssssssssssssssss</p> </div> <div class="tab-pane fade" id="ios"> <p>bbbbbbbbbbbbbbbbbbbbbbb</p> </div> <div class="tab-pane fade" id="jmeter"> <p>eeeeeeeeeeeeeeeeeee</p> </div> </div>
js:
<script type="text/javascript"> $(document).ready(function() { if (location.hash) { $('a[href= ' + location.hash + ']').tab('show'); } $(document.body).on("click", "a[data-toggle]", function(event) { location.hash = this.getAttribute("href"); }); }); $(window).on('popstate', function() { var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); $('a[href=' + anchor + ']').tab('show'); }); </script>