javascript - jQuery 隐藏 Widget Style 的元素 ul li

Question

我正在使用 HTML ul 标签设计小部件样式。

<div class='tabs' style='width:50%'>
<ul>
  <li id="basic-li"><a href='#basic_information'>Basic</a></li>
  <li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
  <li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
  <li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>

我有 4 个 div。

<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>

我只想显示当前已单击的 li 的 href div。我只想使用 HTML/CSS 和 jQuery。

Answer 1

这是基本思想。您可以根据您的需要即兴发挥。我已将目标 li's id 设置为您将单击的 div 中的数据属性。现在，单击该 div，我会获取 li 的 id，这样我们就可以显示它，而其他所有 li 都隐藏。

$(document).ready(function(){

$('.tab').click(function(){

$('.tabs li').hide();
var idTab = $(this).data('id');

$('#' + idTab).show();

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='tabs' style='width:50%'>
<ul>
  <li id="basic-li"><a href='#basic_information'>Basic</a>
  </li><li  id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
  </li><li  id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
  </li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>


<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>

干杯...!!