Javascript jQuery隐藏小部件样式ulli的元素

我正在使用HTML

ul

tag设计一个小部件样式

<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

这可以通过对HTML的以下更改以及添加以下jQuery脚本来实现：

<ul>      
  <!-- add data-target attribute to each "a", with value matching corresponding tab -->    
  <li>
    <a data-target="basic_information" href='#basic_information'>Basic</a>
  </li>
  <li>
    <a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
  </li>
  <li>
    <a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
  </li>
  <li>
    <a data-target="confirm" href='#confirm'>Confirmation</a>
  </li>
</ul>

<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>

<script>
$(function() {

  // Hide all tabs by default
  $('.tab').hide()

  // Assign click handler to all elements with data target attribute
  $('[data-target]').click(function() {

    // Hide all tabs
    $('.tab').hide()

    // Extra target id of the menu link that was clicked
    var tabToShow = $(this).data('target')

    // Show the corresponding tab
    $('#' + tabToShow).show()

    // Return false to prevent default navigation behaviour of links
    return false
  })

})
</script>

//内容
//内容
//内容
//内容
$（函数（）{
//默认情况下隐藏所有选项卡
$（'.tab'）.hide（）
//将单击处理程序分配给具有数据目标属性的所有元素
$（“[数据目标]”）。单击（函数（）{
//隐藏所有选项卡
$（'.tab'）.hide（）
//单击的菜单链接的额外目标id
var tabToShow=$（this.data（'target'））
//显示相应的选项卡
$（'#'+tabToShow）.show（）
//返回false以防止链接的默认导航行为
返回错误
})
})

这是基本思想。你可以根据需要即兴创作。我已将目标

li的id

设置为div中的数据属性，您将单击该属性。现在，点击那个div，我就得到了li的id，这样我们就可以显示它，并隐藏li的所有其他内容

$（文档）.ready（函数（）{
$（'.tab'）。单击（函数（）{
$（'.tabs li'）.hide（）；
var idTab=$（this）.data（'id'）；
$（'#'+idTab）.show（）；
});
});







//基本信息
//主乘客
//其他乘客
//确认