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 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的data属性。现在，在该div上单击时，我会得到li的ID，这样我们就可以显示该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>

干杯... !!

Answer 2

这可以通过对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>

jQuery隐藏Widget Style ul li的元素

2 个答案: