Внутри показано событие .bs.tab не может получить предыдущую активную вкладку - PullRequest
Новая
       33

Внутри показано событие .bs.tab не может получить предыдущую активную вкладку

0 голосов
/ 17 июня 2019

Как здесь сказано https://getbootstrap.com/docs/4.0/components/navs/#events Я использую e.relatedTarget для события visible.bs.tab, чтобы получить предыдущую активную вкладку для добавления некоторых CSS. Но e.relatedTarget не определен. HTML-разметка: 

<ul class="nav nav-pills mb-3" id="itemTabs">
   <li class="nav-item active">
      <a class="nav-link" id="itemTabDescription" data-toggle="pill" href="#description">Описание</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" id="itemTabSpec" data-toggle="pill" href="#spec">Спецификация</a>
   </li>
</ul>
<div class="tab-content" id="itemTabContent">
   <div class="tab-pane show active" id="description">
      <p>...</p>
   </div>
   <div class="tab-pane" id="spec">
      <table>
         ...
      </table>
   </div>
</div>

JS код: 

 $('#itemTabs a').on('shown.bs.tab', function(e) {

        var activeTab = $(e.target),
          previousTab = $(e.relatedTarget),// here is a problem and cant manipulate with previousTab and previousTabPane  
          activeTabPane = $(activeTab.attr('href')), 
          previousTabPane = $(previousTab.attr('href')),
          minHeight = Math.min.apply(null, heights);

        activeTab.css({
          'top': 0
        });

       previousTab.removeAttr('style');
       activeTabPane.css({
        'height': 'auto',
        'zIndex': 7,
        'background-color': '#fffffe',
        'top': 0,
        'width': '100%'
       });
    previousTabPane.removeAttr('style');
    previousTabPane.css('height', minHeight);
  });

enter image description here

И я даже не вижу свойства е. relatedTarget

Затем я вставил скопированный код с вкладками: 

<ul class="nav nav-tabs" id="myTab" role="tablist">
 <li class="nav-item">
  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>


     <div class="tab-content">
         <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
         <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
         <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">3</div>
         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">4</div>
     </div>

С небольшим сценарием: 

$('#myTab a').on('shown.bs.tab', function(e) {
  var activeTab = $(e.target),
    previousTab = $(e.relatedTarget);
    console.log(previousTab);
});

И здесь это работает. enter image description here И теперь я пытаюсь выяснить, сломал ли я, что потерял способность использовать e. relatedTarget

1 Ответ

1 голос
/ 17 июня 2019

Попробуйте добавить класс active к nav-link вместо nav-item

$('#itemTabs a.nav-link').on('show.bs.tab', function(e) {

  var activeTab = $(e.target),
    previousTab = $(e.relatedTarget), // here is a problem and cant manipulate with previousTab and previousTabPane  
    activeTabPane = $(activeTab.attr('href')),
    previousTabPane = $(previousTab.attr('href'));
    //minHeight = Math.min.apply(null, heights);

    activeTab.css({
      'top': 0
    });

  previousTab.removeAttr('style');
  activeTabPane.css({
    'height': 'auto',
    'zIndex': 7,
    'background-color': '#fffffe',
    'top': 0,
    'width': '100%'
  });
  previousTabPane.removeAttr('style');
  //previousTabPane.css('height', minHeight);
  
  console.log('Previous Tab : ' + previousTab.text())
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="itemTabs">
  <li class="nav-item">
    <a class="nav-link active" id="itemTabDescription" data-toggle="pill" href="#description">Описание</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="itemTabSpec" data-toggle="pill"href="#spec">Спецификация</a>
  </li>
</ul>

<div class="tab-content" id="itemTabContent">
  <div class="tab-pane show active" id="description">
    <p>...</p>
  </div>
  <div class="tab-pane" id="spec">
    <table>
      ...
    </table>
  </div>
</div>
...