Question

任何人都可以告诉我是否有CSS（最好）或JS解决方案不显示列表元素id =＆＃34;两个＆＃34;在下面的代码中直到链接＆＃34;＃two＆＃34;单击以下内容（删除元素id =＆＃34;一个＆＃34;在此过程中）。在此，请注意我需要不显示列表元素，而不是简单地隐藏在页面视图中。

如果有人能提供有效的解决方案，我很乐意解释为什么我需要这种奇怪的行为;我只想到另一个问题，没有答案，我的问题......

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

Answer 1

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

jQuery的：

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

这是一个小提琴 Demo

Answer 2

这样的事情（假设你将id ='links'添加到包含链接的div）：

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

首先，我将所有li元素隐藏在gallery-interior中。我注意到你方便地拥有你想要在href属性中显示的元素的选择器，所以我只是将它传递给jquery。

在点击链接之前，不要显示列表元素

2 个答案: