侧栏导航栏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帮助！

回答

相关问题