javascript - 如何制作标签菜单

Question

我希望当我点击 #tab1 时，首先应该打开 ID 为 tab1 的 panel。这个过程用所有 li 完成。

我在 jquery 方面并不完美。

请帮忙。

$(document).ready(function($) {
  $('ul li a#').click(function(){
    $('').addClass('show')
  })
});

ul{height: 40px;}
  li{float: left;padding: 5px;background-color: #ccc;color:#333;margin-left: 10px;list-style: none;}
  .panel{height:100px;width: 800px;margin: 0 auto 10px;background-color: #ccc;/*display: none;*/}
  .show{display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li> <a href="#tab1">Tab1</a></li>
  <li> <a href="#tab2">Tab2</a></li>
  <li> <a href="#tab3">Tab3</a></li>
  <li> <a href="#tab4">Tab4</a></li>
</ul>

<div class="panel" id="tab1">
  1
</div>


<div class="panel" id="tab2">
  2
</div>


<div class="panel" id="tab3">
  3
</div>


<div class="panel">
  4
</div>

Answer 1

您可以简单地使用 .hide() 和 .show() 并将 data-id 属性添加到a 元素具有相应的 id，这样当它被点击时，您可以检索 id 并应用 .show() 就可以了。

$(document).ready(function() {
  $('.panel').hide();
  $('#tab1').show();
  $('ul li a').click(function() {
    $('.panel').hide();
    $('#' + $(this).data('id')).show();
  })
});

ul {
  height: 40px;
}
li {
  float: left;
  padding: 5px;
  background-color: #ccc;
  color: #333;
  margin-left: 10px;
  list-style: none;
}
.panel {
  height: 100px;
  width: 800px;
  margin: 0 auto 10px;
  background-color: #ccc;
  /*display: none;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#" data-id="tab1">Tab1</a></li>
  <li><a href="#" data-id="tab2">Tab2</a></li>
  <li><a href="#" data-id="tab3">Tab3</a></li>
  <li><a href="#" data-id="tab4">Tab4</a></li>
</ul>
<div class="panel" id="tab1">1</div>
<div class="panel" id="tab2">2</div>
<div class="panel" id="tab3">3</div>
<div class="panel" id="tab4">4</div>