點擊顯示文本

我參加入門級HTML/CSS/JS課程，我們的第一項任務是製作一個關於我們自己的簡單網站。我們需要有一個水平菜單，點擊時會顯示某些信息。例如，點擊「描述」應該會顯示一段描述我們自己的短文。從我所研究的內容來看，似乎我的答案在於使用JQuery，但我不相信他期望我們知道這一點，也不會早於這一點使用它。我還沒有看到另一種選擇嗎？點擊顯示文本

<html> 

<head> 
    <meta charset="utf-8" /> 

    <link rel="stylesheet" type="text/css" href="style.css"> 
<title>Jeremy Ortiz</title> 
<div id="header"> 
<h1>A Little About Jeremy Ortiz</h1> 
</div> 

</head> 

<body> 
    <img src="hwpic.jpg" alt="Me"> 

    <div id="content"> 
    <div id="nav"> 
    <h2>Navigation</h2> 
    <ul> 
     <li><a class="selected" href="">Description</a></li> 
     <li><a href="">A form</a></li> 
     <li><a href="">Course List</a></li> 
     <li><a href="">Table</a></li> 
     <li><a href="">Contact Information</a></li> 
    </ul> 
    </div> 
</body> 
</html> 



#header { 
    padding: 10px; 
    background-color: #6CF; 
    color: white; 
    text-align: center; 
} 

img { 
    position: absolute; 
    right: 7px; 
    bottom: 148px; 
    z-index: -1; 
} 

#content { 
    padding: 10px; 
} 

#nav { 
    width: 180px; 
    float: left; 
} 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
}

來源

2017-02-08 Leopold Stoich

只需爲每個頁面創建一個html文檔，並將您的鏈接重定向到每個相關頁面。（'description.html'，'contactInfo.html'等）不需要javascript或jquery。 –

發佈你的CSS – j08691

如果你的任務包括使用SO來找到你的答案，請注意，你應該***搜索***首先，只***問***如果你的問題還沒有問過/回答過。現在，甚至沒有搜索和大膽猜測。你怎麼看？您的問題是否曾被問過？ –

我的答案會假設你的目標是使用基本的JavaScript，而不是更改導航使用<a>元素的用戶頁面來完成這項任務。我知道有更高效的方法來執行此操作，但我選擇以簡單易懂的方式呈現信息。

我會做到這一點的方法是改變你的<a>元素：

<a class="selected" href="">Description</a>

到按鈕元素與功能添加的「onClick」屬性時，該按鈕被點擊呼叫：

<button onclick="displayDescription()">Click Me</button>

現在我們需要創建單擊按鈕時將顯示的元素。爲此，我們創建了一些我們可以隱藏的容器，直到點擊相應的按鈕。

<div id="description" style="display: none;"> 
    Displayed when the description button is clicked. 
</div>

注意**對於每一個按鈕，我們需要創建一個<div style="display: none;">隱藏的信息及其相應的按鈕被點擊，直到。再次，在這種方法中，每個JavaScript函數映射到一個按鈕，以同樣的方式每個隱藏將映射到相同的按鈕

function displayDescription() { 
    var x = document.getElementById('description'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    } else { 
     x.style.display = 'none'; 
    } 
}

注：

現在我們可以創建我們的JavaScript功能。

如果您需要更多幫助，我建議您查看w3schools，特別是針對這個問題，這裏提供了您需要完成的任務的鏈接。

http://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

我希望這是有幫助的，因爲我我的大學課程之一，我將在今天正式也許我的回答更在稍後的時間中只寫了這一點。

來源

2017-02-08 18:49:43

非常感謝您的幫助。 –

點擊顯示文本

回答

相關問題