gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:49:46 25 4
gpt4 key购买 nike

我正在使用 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。

最佳答案

这是基本思想。您可以根据需要即兴创作。我已将目标 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>

干杯...!!

关于javascript - jQuery 隐藏 Widget Style ul li 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51587578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com