如何使用document.getElementByTagName和目标特定类名

how to use document.getElementByTagName and target specific class name

本文关键字:目标 何使用 document getElementByTagName      更新时间:2023-09-26

这里有代码。

<div class="container">
<div class="accordionHeader">
<h1 onclick="test()"></h1>
</div>
<div class="accordionContent" style="display:none">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>

我想定位并显示/隐藏class="accordionContent"。我试过使用document.getElementByTagName,但我不知道如何针对class="accordionContent"。我不允许使用id。

希望你能帮助我。试着寻找,但没有成功。

使用jquery 可以这样做

$('.accordionContent').show(); //to show

$('.accordionContent').hide(); //to hide

甚至可以切换:)

$('.accordionContent').toggle(); //to hide and show 
$('.accordionContent').slideToggle(); //toggle with Animatation
$('.accordionContent').fadeIn(); //fadeIn with Animatation
$('.accordionContent').fadeOut(); //FadeOut with Animatation

选择任何一个,只要你觉得舒服:)

您可以使用getElementByClassName并隐藏/显示accordionContentdiv,如下所示:

document.getElementsByClassName('accordionContent')[0].style.display="show";  // to show
document.getElementsByClassName('accordionContent')[0].style.display="show";  // to hide