在 shown.bs.tab 事件中无法获取上一个活动选项卡

Question

正如这里所说的https://getbootstrap.com/docs/4.0/components/navs/#events 我在showed.bs.tab 事件上使用e.relatedTarget 来获取先前的活动选项卡以添加一些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);
  });

我什至没有看到属性 e.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);
});

在这里它起作用了。 现在我试图找出，我已经打破了我失去使用 e.relatedTarget

的能力

Answer 1

尝试将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>