Question

我正在尝试使用一个href来显示和隐藏其他两个div。默认情况下会显示一个div，但第二个div仍保持隐藏状态。

    <a href="#ben1" class="fa fa fa-times closer" > 
    <p> link text </p>
   </a>
    <a href="#ben2" class="fa fa fa-times closer" > 
    <p> link text </p>
   </a>


<div class="resume right-col" id="ben1">
<p>Hello this is a test </p>
</div> 

<div class="resume right-col" id="ben2">
<p>Hello this is a test </p>
</div> 


<div class="resume right-col" id="ben1">
<p>second text area i need displayed by default</p>
</div> 

<div class="resume right-col" id="ben2">
<p>second text area i need hidden initially/p>
</div> 


<script>
$('.resume') .hide()
$('#ben1').show();
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');

$('.resume'+target).toggle();
e.preventDefault();
});
</script>

在加载页面时，始终隐藏ID为“ ben1”的第二个div。我需要在脚本中添加一些内容吗？

Answer 1

例如，您可以创建一个显示而不是使用ID的类。

    <a href="#ben1" class="fa fa fa-times closer" > 
    <p> link text </p>
   </a>
    <a href="#ben2" class="fa fa fa-times closer" > 
    <p> link text </p>
   </a>


<div class="resume right-col class1" id="ben1">
<p>Hello this is a test </p>
</div> 

<div class="resume right-col class2" id="ben2">
<p>Hello this is a test </p>
</div> 


<div class="resume right-col class1" id="ben1">
<p>second text area i need displayed by default</p>
</div> 

<div class="resume right-col class2" id="ben2">
<p>second text area i need hidden initially/p>
</div> 


<script>
$('.resume') .hide()
$('.class1').show();
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');

$('.resume'+target).toggle();
e.preventDefault();
});
</script>

Answer 2

一个ID在页面中应该是唯一的，因此您会混淆jquery。

https://css-tricks.com/almanac/selectors/i/id/

尝试使用类。

jQuery显示和隐藏显示一个div，但不显示另一个

2 个答案: