動態顯示和隱藏元素

我打算有一個網站佈局，其中有多個部分，每個部分都包含其中的元素。每個部分都應該鏈接到我的導航欄中的鏈接（href），並且只能在單擊此鏈接時纔可見。動態顯示和隱藏元素

我該如何做到這一點？

<nav> 
 
    <ul id="nav-menu" name="nav-menu" class="nav-menu"> 
 
    <li><a href="#Home">Home</a></li> 
 
    <li><a href="#Services">Services</a></li> 
 
    </ul> 
 
</nav> 
 

 
<section id="home-text" class="home-text"> 
 
    <h1>Home</h1> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, donec dui ligula, ut elit ac tristique, vehicula sem pellentesque cubilia ante, commodo odio elit duis varius nibh in. Nam vestibulum. Vehicula id hac id viverra pellentesque, natoque elit posuere consectetuer quis etiam ligula. Nulla nam habitasse adipiscing mauris sed maecenas, ultrices magni purus posuere molestie donec, ultrices a, eget enim nec dolor lobortis quam. Est nibh est pellentesque velit, nibh quis faucibus orci a rhoncus. 
 
    </p> 
 
</section> 
 

 
<section id="services-text" class="services-text"> 
 
<h1>Services</h1> 
 
    <p> 
 
     Eleifend malesuada nulla sagittis, aenean eleifend wisi suscipit adipiscing nonummy, et et a ultrices accumsan nullam proin, leo egestas lobortis mauris convallis, adipiscing odio nisl ornare lobortis massa. Odio nulla lacus vel mus penatibus a. Morbi sodales, turpis sed fermentum, nunc libero integer vel, consectetuer curae condimentum erat augue. Volutpat tortor sem consequat velit egestas, ligula sapien wisi et viverra, nulla mattis tellus ut velit, hymenaeos at nulla nunc. Enim eros leo pellentesque nisl vel mi, leo velit, amet consectetuer lacus urna volutpat dolor molestie, placerat fermentum urna lorem purus sollicitudin. 
 
    </p> 
 
</section>

來源

2016-03-10 Harriet

這個問題似乎是不正確的記載：「每一節都應該鏈接到我的導航欄中的鏈接（HREF），並點擊鏈接等時，只應是可見的。」如果鏈接不可見，則無法點擊鏈接。 –

@MladenAdamovic，我再讀一遍 - 不 - 可見性開啓或關閉，適用於該部分的內容，而不適用於導航欄鏈接。 :) Empasis在「每個部分...」 – Harriet

https://jsfiddle.net/rayon_1990/089682Lj/ – Rayon

您可以設置元素的可視性隱藏着要麼

display: none

或 visibility：hidden的

（最後一個元素將佔用空間）。

在Javascript中你可以像設置元素顯示無（或其他方式）：

document.getElementById('home-text').style.display = 'none';

因此，這將是一個工作的代碼（這可能與顯示功能的選擇得到改善，這是我離開它給你）：

https://jsfiddle.net/adamovic/cj24qgf3/

來源

2016-03-10 10:12:24

動態顯示和隱藏元素

回答

相關問題