如何防止标签页的默认行为和手动打开标签页

时间:2018-07-02 13:24:48

标签: jquery twitter-bootstrap-3 tabs

我试图停止引导选项卡的默认行为,进行一些操作并检查是否一切正常,将用户定向到他单击的选项卡。

<div>
  <ul class="nav nav-tabs" role="tablist" id="#myTabs">
    <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>

<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>

js

  $('#myTabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    console.log('Tab Change Initiated');

    //prevent default behavior of tabs
    e.preventDefault();


    //some operation 

    //open tab the user wants to go to

    //$('a[href="#9039"]').tab('show');  // gives error

    //$('#myTabs a[href="'+ e.target.attributes[0].value +'"]').tab('show'); // gives error

    //$(e.target).tab('show'); // gives error
 });

当我尝试显示用户单击的选项卡时,出现堆栈溢出和正则表达式错误

0 个答案:

没有答案