刷新Bootstrap标签页

Question

刷新Bootstrap标签页

javascriptjqueryhtmlcsstwitter-bootstrap

3

我需要关于Bootstrap选项卡的帮助。

我有一个带有面板的Bootstrap选项卡，并希望在刷新后保持标签打开状态。我们有很多事情要做，但这主要是因为我们通过NinjaForms输入了新数据。

无论如何，这是我找到的解决方案，但出于某种原因，我无法使其正常工作。

选项卡

 <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading" style="z-index:998;">
      <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#tab1overview" data-toggle="tab"><i 
class="fa fa-building" style="color:#50AE54"></i> Client Overview</a> . 
</li>
        <li><a href="#tab2sites" data-toggle="tab"><i class="fa fa- 
sitemap" style="color:#1DB2C8"></i> Sites</a></li>
        <li><a href="#tab3users" data-toggle="tab"><i class="fa fa-user- 
plus" style="color:#FC5830"></i> Users</a></li>
        <li><a href="#tab4assets" data-toggle="tab"><i class="fa fa- 
desktop" style="color:#2C98F0"></i> Assets</a></li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown"><i class="fa fa-wrench" 
 style="color:#333333"></i> Services <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#tab11internal" data-toggle="tab"><i class="fa 
 fa-wrench" style="color:#333333"></i> Internal Services</a></li>
            <li><a href="#tab12external" data-toggle="tab"><i class="fa 
 fa-wrench" style="color:#333333"></i> External Services</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown"><i class="fa fa-wrench" 
 style="color:#333333"></i> Web Services <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#tab6webhosting" data-toggle="tab"><i class="fa 
 fa-wrench" style="color:#333333"></i> Web Hosting</a></li>
            <li><a href="#tab7domains" data-toggle="tab"><i class="fa 
fa-wrench" style="color:#333333"></i> Domains</a></li>
            <li><a href="#tab8crushftp" data-toggle="tab"><i class="fa 
  fa-wrench" style="color:#333333"></i> SFTP</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown"><i class="fa fa- 
    certificate" style="color:#333333"></i> Licenses <span 
   class="caret"></span> 
     </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#tab9email" data-toggle="tab"><i class="fa fa- 
         certificate" style="color:#333333"></i> eMail</a></li>            
          </ul>
        </li>
           <li><a href="#tab10faq" data-toggle="tab"><i class="fa fa- 
   question" style="color:#1DB2C8"></i> FAQ</a></li>
       <!-- Commented out for now <li><a href="#tab10migrations" data- 
     toggle="tab"><i class="fa fa-rocket" style="color:#2C98F0"></i> 
     Migrations</a></li> -->
      </ul>
    </div>

JS

$(function() {
$('a[data-toggle="tab"]').on('click', function(e) {
    window.localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = window.localStorage.getItem('activeTab');
if (activeTab) {
    $('#myTab a[href="' + activeTab + '"]').tab('show');
    window.localStorage.removeItem("activeTab");
}
});

WP Functions

wp_enqueue_script( 'tabs-refresh',  
get_template_directory_uri().'/library/js/tabs.js', array( 'jquery' ), 
'1.0.0', false );

补充一下，通过检查Chrome控制台，我发现了这个错误:

Chrome控制台错误

如果能得到帮助就太好了。

谢谢

- Richard

3个回答

0

我已经弄清楚了。

只需将此添加到选项卡中即可；

 <li><a href="#tab11internal" **role="tab"** data-toggle="tab"><i class="fa fa- 
 wrench" style="color:#333333"></i> Internal Services</a></li>

- Richard

0

当你在使用jQuery和WordPress时，由于兼容性的原因，你必须使用jQuery而不是$。

如果你想使用document.ready，你可以将$作为参数传递给函数。

jQuery(function ($) {
  // Your code
});

- Chandru

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- caiovisk · Accepted Answer

默认情况下，在WordPress中排队jQuery时，必须使用jQuery，而不使用$（这是为了与其他库兼容）。

参见：TypeError: $ is not a function when calling jQuery function 制作您的函数：

(function($){ 
   [...]
})(jQuery);

所以：

(function($){ 
$('a[data-toggle="tab"]').on('click', function(e) {
    window.localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = window.localStorage.getItem('activeTab');
if (activeTab) {
    $('#myTab a[href="' + activeTab + '"]').tab('show');
    window.localStorage.removeItem("activeTab");
}
})(jQuery);