有没有一种方法可以在不使用唯一标识符的情况下使用 bootstrap 选项卡

Question

我希望能够使用 bootstrap 选项卡，但不使用唯一选择器。

我不能保证选择器是dom中唯一的一个。

我有很多子模板，它们要么在呈现页面时包含在页面中，要么可以通过 ajax 加载到模式中。

我确实使用了 id，但从来没有在我可能在模态中使用的模板中使用，一些模态是在页面加载事件之后预加载的。

  <div class="panel">
    <div class="panel-heading">
       <ul class="nav nav-tabs">
        <li><a data-target=".pane1" data-toggle="tab" aria-expanded="true">pane 1</a></li>
        <li><a data-target=".pane2" data-toggle="tab" aria-expanded="true">pane 2</a></li>
      </ul>     
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane pane1">pane 1</div>
        <div class="tab-pane pane2">pane 2</div>
      </div>
    </div>
  </div>

我已经在锚标签上尝试了一个 onclick 事件，只有 jquery 这不太理想，但无法让它与 .tab('show')

一起工作

onclick="$(this).closest('.panel')
   .find('.tab-pane').hide();$(this).closest('.panel').find('.pane1').show();"

Answer 1

是的，有可能...为此 HTML:

 <div class="panel">
    <div class="panel-heading">
       <ul class="nav nav-tabs">
        <li><a href="#">pane 1</a></li>
        <li><a href="#">pane 2</a></li>
      </ul>     
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane">pane 1</div>
        <div class="tab-pane">pane 2</div>
      </div>
    </div>
  </div>

这个Javascript:

$('.panel .nav-tabs').on('click', 'a', function(e){
  var tab  = $(this).parent(),
      tabIndex = tab.index(),
      tabPanel = $(this).closest('.panel'),
      tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
  tabPanel.find('.active').removeClass('active');
  tab.addClass('active');
  tabPane.addClass('active');
});

见this functioning bootply

注意请注意，我从锚点中删除了所有 data 属性，以防止引导程序自动连接到它们**

Answer 2

此解决方案使用角色属性而不是 class 名称来控制功能，所有角色都是有效的 ARIA 值。 http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml。该解决方案在嵌套 "tabpanels".

时有效

   <div role="tabpanel">
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
        <li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
        <li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel">1</div>
        <div role="tabpanel">2</div>
        <div role="tabpanel">3</div>
      </div>
    </div>

    <div role="tabpanel">
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
        <li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
        <li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel">1</div>
        <div role="tabpanel">2</div>
        <div role="tabpanel">3</div>
      </div>
    </div>

javascript

我修改了 bootstrap 选项卡 "show" 方法以包含此代码这些行。

var $context = $this.closest('[role="tabpanel"]');
if($context.length && $target.length != 1){

    if($target.length > 1){
        $target = $context.find('[role="tabpanel"] ').eq($this.parent().index());
    } else {
        $target = $context.find(selector).length ? $context.find(selector) : $target;
    }
}

完整方法。

 $.fn.tab.Constructor.prototype.show=function(){var t=this.element,e=t.closest("ul:not(.dropdown-menu)"),a=t.data("target");if(a||(a=t.attr("href"),a=a&&a.replace(/.*(?=#[^\s]*$)/,"")),!t.parent("li").hasClass("active")){var r=e.find(".active:last a"),n=$.Event("hide.bs.tab",{relatedTarget:t[0]}),i=$.Event("show.bs.tab",{relatedTarget:r[0]});if(r.trigger(n),t.trigger(i),!i.isDefaultPrevented()&&!n.isDefaultPrevented()){var l=$(a),s=t.closest('[role="tabpanel"]');s.length&&1!=l.length&&(l=l.length>1?s.find('.tab-pane, [role="tabpanel"] ').eq(t.parent().index()):s.find(a).length?s.find(a):l),this.activate(t.closest("li"),e),this.activate(l,l.parent(),function(){r.trigger({type:"hidden.bs.tab",relatedTarget:t[0]}),t.trigger({type:"shown.bs.tab",relatedTarget:r[0]})})}}};

有没有一种方法可以在不使用唯一标识符的情况下使用 bootstrap 选项卡

Is there a way to use bootstrap tabs without using a unique identifier

javascript

jquery

twitter-bootstrap

bootstrap-tabs