Question

我通过Bootstrap使用标签。我无法达到这个问题的目标。想象一个简单的案例，如下面的例子。当我点击标签时，会显示内容，这是完美的。

现在假设加载资源密集且内容很长的内容（例如大型SQL查询），我不希望当我再次点击同一个标签时，内容正在充电。

然而，我无法生产它。下面的示例说明了我的问题，因为如果您重新单击选项卡，我们会看到背景发生了变化，所以我不会更改它。

HTML：

<div role="tabpanel">

  <ul class="nav nav-tabs" role="tablist" id="myTab">
    <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 text-center">
    <div role="tabpanel" class="tab-pane active" id="home"><p><i class="fa fa-refresh fa-spin"></i> HOME </p></div>
    <div role="tabpanel" class="tab-pane" id="profile"><p><i class="fa fa-refresh fa-spin"></i> PROFILE </p></div>
    <div role="tabpanel" class="tab-pane" id="messages"><p><i class="fa fa-refresh fa-spin"></i> MESSAGES </p></div>
    <div role="tabpanel" class="tab-pane" id="settings"><p><i class="fa fa-refresh fa-spin"></i> SETTINGS </p></div>
  </div>

</div>

关联的jQuery只是Bootstrap $('#myTab a').tab('show');

提供的文档

请查看 this JSFIDDLE

那么如何在标签处于活动状态时禁用标签？

Answer 1

检查DEMO

$(document).ready(function(){    
    $('#myTab a').tab('show');    
    $('#myTab a').click(function(){
        if (!$(this).closest('li').hasClass('active')) {
        $('.tab-content').css('background', '#' + random_colour());
        }
    });
});

Answer 2

Fiddle Demo

$(document).ready(function(){    
    $('#myTab a').tab('show');    
    $('#myTab a').click(function(){
        if(!($(this).parent("li").hasClass("active")))
        {
            $('.tab-content').css('background', '#' + random_colour());
        }

    });
});

function random_colour(){
    return Math.floor(Math.random()*16777215).toString(16);
}

禁用活动选项卡上的链接（Bootstrap）

2 个答案: