[英]Hiding HTML Content with javascript via class names
我本來不想問這個問題的,但是搜索了這里的相關文章后,我不得不問。 我的代碼有 7 個導航鏈接,它們都具有相同的類,並且由於 html 很長,我希望能夠在單擊鏈接之前隱藏內容,並在單擊另一個導航鏈接時使內容消失; 為下一個留出空間。 我更喜歡 vanilla js 的答案,因為這就是我現在正在學習的。 這是我的筆的鏈接: Codepen
<ul>
<a href="#Hello_World" class="nav-link" onclick='myFunction()'>
<li>Hello World</li>
</a>
<a href="#Introducing_JSX" class="nav-link">
<li>Introducing JSX</li>
</a>
<a href="#Rendering_Elements" class="nav-link">
<li>Rendering Elements</li>
</a>
<a href="#Components_and_Props" class="nav-link">
<li>Components and Props</li>
</a>
<a href="#State_and_Lifecycle" class="nav-link">
<li>State and Lifecycle</li>
</a>
<a href="#Handling_Events" class="nav-link">
<li>Handling Events</li>
</a>
<a href="#Thinking_in_React" class="nav-link">
<li>Thinking in React</li>
</a>
</ul>
這是我的導航欄的示例。
免責聲明:我完全是一個 js 初學者。 感謝您的耐心和時間。
我正在使用本教程作為指南。
CSS
.tabcontent{display:none}
HTML
<ul>
<li>
<button id="default" class="tablinks" onclick="myFunction('helloWorld')">Hello World</button>
<div id="helloWorld" class="tabcontent">
<ul><li>1</li><li>2</li><li>3</li></ul>
</div>
</li>
<li>
<button class="tablinks" onclick="myFunction('jsx')">JSX</button>
<div id="jsx" class="tabcontent">
<ul><li>Intro JSX</li><li>Intro JSX 2</li></ul>
</div>
</li>
<li>
<button class="tablinks" onclick="myFunction('react')">React</button>
<div id="react" class="tabcontent">
<ul><li>intro raect 1</li><li>intro react 2</li></ul>
</div>
</li>
</ul>
JS
function myFunction(id){
var i, tabcontent;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(id).style.display = "block";
}
document.getElementById("default").click();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.