Wordpress链接到Bootstrap Tab

时间:2016-12-13 21:19:12

标签: wordpress twitter-bootstrap-3

我正在尝试使用domain.com/about/#History

链接到其他页面的标签页

但它总是只加载基页,第一个标签处于活动状态。

这是我的HTML:

<ul class="nav nav-tabs nav-justified">
    <li class="nav-item active">
      <a class="nav-link" href="#About" data-toggle="tab">About Us</a></li>
    <li class="nav-item">
      <a class="nav-link" href="#History" data-toggle="tab">Our History</a></li>
    <li class="nav-item">
      <a class="nav-link" href="#Board" data-toggle="tab">Board</a></li>
    <li class="nav-item">
      <a class="nav-link" href="#Contact" data-toggle="tab">Contact Us</a></li>
</ul>

<div class="tab-content">
<div id="About" class="tab-pane active">...</div>
<div id="History" class="tab-pane">...</div>
<div id="Board" class="tab-pane">...</div>
<div id="Contact" class="tab-pane">...</div>
</div>

我在页脚中添加了js但仍无法正常工作..

<script>
 $(document).ready(function(){
     if (location.hash) {
         $('a[href=' + location.hash + ']').tab('show');
     }
 });
</script>

我也试过这个:

<script type="text/javascript">
 var url = document.location.toString();
 if (url.match('#')) {
     $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
 } 
 $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.refresh.hash = e.target.hash;
 })
</script>

知道我缺少什么,或者我需要添加到Wordpress的任何内容? Bootstrap的每个方面都在工作,我只是遇到了麻烦..感谢您的帮助!

〜詹姆斯

0 个答案:

没有答案