Есть ли способ использовать вкладки начальной загрузки без использования уникального идентификатора

Я хотел бы иметь возможность использовать вкладки начальной загрузки, но без использования уникального селектора.

Я не могу гарантировать, что селектор является единственным в домене.

У меня есть много суб-шаблонов, которые либо включены в страницу, как она отображается, либо могут быть загружены внутри модального через AJAX.

Я использую идентификаторы, но никогда в шаблонах, которые я мог бы использовать в модальном режиме, некоторые модалы предварительно загружаются после события загрузки страницы.

  <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();"
Источник

2 ответа

Решение

Это решение использует атрибуты роли для управления функциональностью, а не имена классов, все роли являются допустимыми значениями ARIA. http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml. Решение работает при вложении "табульных панелей".

   <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

Я изменил метод "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]})})}}};
Источник

Да, это возможно... для этого 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');
});

Смотрите этот функционирующий bootply

Примечание Обратите внимание, что я удалил все data атрибуты из якорей, чтобы предотвратить автоматическую привязку к ним при загрузке **

Источник
Другие вопросы по тегам