側欄導航欄javascript幫助！

我在這裏使用JavaScript顯示/隱藏文本掙扎。這裏是我想達到像下面的圖片： alt text 側欄導航欄javascript幫助！

和下面的是我的javascript我有：

function change_display(display) 
{ 
    if(display.style.display=="none") 
    { 
     display.style.display=""; 
     } 
     else 
     { 
     display.style.display="none"; 
     } 
    }

的Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="Style_sheet.css" rel="stylesheet" type="text/css" /> 
<script src="Display text.js" type="text/javascript"></script> 
</head> 

<body onload="change_display(display)"> 
<div class="Body"> 
<div class="header"> 
<h1 id="head">Manage Components</h1> 
<h3 id="select-system">Select System</h3> 
</div> 
<div class="side-nav"> 
<a href="javascript:change_display(display)">192.101 English A</a> 
<div id="display"><a href="javascript:change_display(display)">&nbsp;&nbsp;Section 1:</a></div> 
<div id="display">&nbsp;&nbsp;&nbsp;&nbsp;Topic 1:</div> 
</div> 

</div> 

</body> 
</html>

什麼我有沒有工作。我不知道如何讓它起作用

雖然，我可以顯示爲文本1，但如果我想保持點擊並向下顯示，它將無法正常工作。

哦另外，我也想用它的CSS樣式，有無論如何我可以做？因爲我已經使用ID的JavaScript因此，我不能再次使用ID爲CSS。我試圖使用「名稱」，但根本不起作用。

請幫忙！提前致謝！

來源

2010-10-06 James1

幾個明顯的問題：

您呼叫change_display(display)，但是你有沒有創建/填充一個名爲display變量。你不能有多個具有相同ID的元素。你不能通過id直接訪問一個html元素 - 你必須使用id來獲得對它的引用。

一些小事情，我們會清理的時候了：並不需要body的load事件change_display呼叫。從href調用js是不好的形式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="Style_sheet.css" rel="stylesheet" type="text/css" /> 
<script src="Display text.js" type="text/javascript"></script> 
</head> 

<body > 
<div class="Body"> 
<div class="header"> 
<h1 id="head">Manage Components</h1> 
<h3 id="select-system">Select System</h3> 
</div> 

<div class="side-nav"> 

    <a href="#" onclick="change_display('eng_a'); return false;">192.101 English A</a> 

    <div id="eng_a" style="padding-left: 20px;"> 
     <a href="#" onclick="change_display('eng_a_sec_1'); return false;">Section 1:</a> 

     <div id="eng_a_sec_1" style="padding-left: 20px;"> 
      Topic 1: 
     </div> 

    </div> 

</div> 

</div> 

</body> 
</html

的javascript：

function change_display(id) 
{ 
    // gets an html element by its unique id. 
    var display = document.getElementById(id); 

    if(display.style.display=="none") 
    { 
     display.style.display=""; 
    } 
    else 
    { 
     display.style.display="none"; 
    } 
}

來源

2010-10-06 01:45:53 lincolnk

非常感謝您的意見。我會記住它和代碼很好，非常感謝！ – James1 2010-10-06 20:11:27

側欄導航欄javascript幫助！

回答

相關問題