不要显示列表元素，直到链接被点击

Don't display list element until link clicked

本文关键字：链接 显示 列表元素      更新时间：2023-09-26

谁能告诉我，如果有CSS(最好)或JS解决方案，不显示列表元素id="二"在下面的代码，直到链接"#二"在以下已被点击(删除元素id="一"在这个过程中)。在这里，请注意，我需要list元素根本不显示，而不是简单地隐藏在页面视图中。

我很高兴解释为什么我需要这个奇怪的行为，如果有人能提供一个工作的解决方案;我只是在思考另一个问题，没有答案，所以我的问题…

<div id="gallery">
<ul id="gallery-interior">
<li id="one"><img src="../images/normal_1"></li>
<li id="two"><img src="../images/notmal_2"></li>
</ul>
</div>

<div>
<a href="#one"><img src="../images/thumb_1.jpg"></a>
<a href="#two"><img src="../images/thumb_2.jpg"></a>
</div>

我用jquery为你做了一个解决方案。

jQuery: 

$(document).ready(function() {
$('a[href*="two"]').click(function() {
    $("#one").hide();
    $("#two").show();
});
})

给你一把小提琴演示

像这样如何(假设您将id='links'添加到包含链接的div中):

<script>
$('#links a').on('click', function(){
    $('#gallery-interior li').hide()
    $($(this).attr('href')).show()
})
</script>

首先我隐藏了gallery-interior中的所有li元素。我注意到您很方便地在href属性中提供了要显示的元素的选择器，因此我将其传递给jquery。

相关文章：