Question

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

我无法保证选择器是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属性，以防止bootstraps自动连接到它们**

Answer 2

此解决方案使用角色属性来控制功能而不是类名，所有角色都是有效的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]})})}}};

有没有办法在不使用唯一标识符的情况下使用引导选项卡

2 个答案: