Question

引导选项卡上的默认行为是不允许单击显示的选项卡。如何“禁用”此功能并允许用户再次单击显示的选项卡？因为我使用AJAX加载页面，所以它会重新加载它。

        <ul class="nav nav-tabs" id="myTab">
          <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
          <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
          <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
          <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="home">Home</div>
          <div class="tab-pane" id="profile">Profile</div>
          <div class="tab-pane" id="messages">Message</div>
          <div class="tab-pane" id="settings">Settings</div>
        </div>

jQuery(function () {
    jQuery('#myTab a:last').tab('show')
})

Answer 1

这就是你的意思

$('#myTab').on('click',function(e){
    console.log($(e.target).text())
        //your ajax code goes here to load what your need....

})

http://jsfiddle.net/xFW8t/1482/

Answer 2

根据我的理解，您希望让用户单击所选选项卡以更新该选项卡的内容。

解决方案1：使用onclick事件。

var tape = " I hate work. I haaaate fire. I  haaatttee school";

var pope = tape.replace(/hate/gi,function ool (x){
return  x.replace(/hate/gi,"love")
})

console.log(pope) ===> I love work. I **haaaate** fire. I  haaatttee school

解决方案2：使用jQuery激活选项卡

<a data-target="#home" data-toggle="tab" onclick="window.location.reload();"> Home</a>

将$( "#tabId" ).tabs({ active: # });替换为indended tab索引（这将是一个数字）。

Answer 3

我尝试使用JQuery removeClass，因为选项卡激活正在被类应用 - ＆＃34;活跃＆＃34;

所以我只是删除它并使其可供点击。

HTML：

                <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
            <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
            <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
            <li class="aa"><a class="clickme" data-toggle="tab" data-target="#settings" >Settings</a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active" id="home">Home</div>
            <div class="tab-pane" id="profile">Profile</div>
            <div class="tab-pane" id="messages">Message</div>
            <div class="tab-pane" id="settings">Settings</div>
          </div>

使用Javascript：

    $('#myTab').on('click',function(){

    setTimeout(aa, 20);

    })

    function aa(){
    //alert("hi");
    $(".aa").removeClass('active');

     //$("li:last").off(".active");
     console.log(e.target);

    }

Jsfiddle网址供参考 - http://jsfiddle.net/Nagasai_Aytha/xFW8t/1485/

希望这对你有帮助:)）

Answer 4

得到你的解决方案。主要目标是删除有效标签class和您的自定义li的有效class。在这里，我添加了custom-active代替active。

$(function () {
    var ok = $('#myTab a:last').tab('show')
    $(document).on('click', 'a[data-toggle="tab"]', function () {
      if($(this).parent().hasClass('active')){
          var $link = $('li.active a[data-toggle="tab"]');
          $link.parent().removeClass('active');
          var tabLink = $link.attr('href');
          $('#myTab a[href="' + tabLink + '"]').tab('show');
          $link.parent().addClass('custom-active');
       }
  });
})

为此，您需要一些像...这样的风格。

#myTab {

    .custom-active {
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

}

如何允许再次单击显示的引导选项卡？

4 个答案: