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

您需要当前点击的data-tab元素中的li属性。所以它应该是：

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

选项卡内容在单击时消失

1 个答案: