jquery - 标签内容在点击时消失

Question

我正在尝试使用 jQuery 构建一个菜单，通过选项卡更改内容，但是当我单击不同的 <li> 时元素内容就消失了。我正在使用列表项来更改下面的内容。

抱歉，菜单项上缺少一些图片，但我想您应该明白了。

第一个内容在那里，但是当我想改变它时，它全部消失了。

$(document).ready(function() {

  $('ul li').click(function() {
    var tab_id = $('ul li').attr('data-tab');

    $('ul li').removeClass('active');
    $('.content').removeClass('current');

    $(this).addClass('active');
    $("#" + tab_id).addClass('current');
  });

});

/* ASIDE */


/* NAV */

aside {
  float: left;
  width: 30%;
}

aside nav {
  text-align: center;
  justify-content: center;
}

aside nav ul {
  display: inline-block;
  list-style: none;
  padding: 0;
}

aside nav ul li {
  display: inline-block;
  margin: 2px 0px;
  text-align: center;
  font-size: 10px;
  padding: 6px 6px 12px 6px;
  color: black;
}

.active {
  text-decoration: none;
  color: black;
  border-bottom: solid 1px black;
}

aside nav ul li img {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: 4px auto;
}

aside div {
  height: 100vh;
  overflow-x: scroll;
  padding: 12px;
  margin-left: 2px;
}

.content {
  display: none;
}

.content.current {
  display: inline-block;
}

aside .content img {
  width: 100%;
  height: auto;
}

aside .content label {
  font-size: 12px;
}

.content p {
  font-size: 14px;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="tabs" role="navigation" aria-label="menu">
  <ul class="tabs">
    <li tabindex="1" data-tab="tab-1"><img src="img/figures.svg" alt="figures selector">Figures</li>
    <li tabindex="2" data-tab="tab-2"><img src="img/references.svg" alt="references selector">References</li>
    <li tabindex="3" data-tab="tab-3"><img src="img/related.svg" alt="related selector">Related</li>
    <li tabindex="4" data-tab="tab-4"><img src="img/info.svg" alt="details selector">Details</li>
  </ul>
</nav>

<!-- CONTENT -->
<div id="tab-1" role="content" aria-label="figures content" class="content current">
  <img src="img/figure1.jpg" alt="figure 1" id="fig1" value="fig1">
  <label for="fig1">Fig. 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
  <hr/>
  <img src="img/figure2.png" alt="figure 2" id="fig2" value="fig2">
  <label for="fig2">Fig. 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
  <hr/>
  <img src="img/figure3.png" alt="figure 3" id="fig3" value="fig3">
  <label for="fig3">Fig. 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
  <hr/>
</div>
<div id="tab-2" role="content" aria-label="references content" class="content">
  <h3>Lorem</h3>
  <hr>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Lorem</h3>
  <hr>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</aside>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/script.js"></script>

Answer 1

您需要当前单击的 li 元素的 data-tab 属性。所以应该是:

var tab_id = $(this).attr('data-tab');