侧导航栏javascript帮助！_Javascript

侧导航栏javascript帮助！

javascript

侧导航栏javascript帮助！,javascript,Javascript,我正在努力使用javascript显示/隐藏文本。以下是我想要实现的目标，如下图所示：下面是我的javascript代码： function change_display(display) { if(display.style.display=="none") { display.style.display=""; } else { display.style.display="none";

我正在努力使用javascript显示/隐藏文本。以下是我想要实现的目标，如下图所示：

下面是我的javascript代码：

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

Html


无标题文件
管理组件
选择系统
专题1：

我那里的东西不管用。我不知道如何让它工作

虽然，我可以显示为文本1，但如果我想保持单击并向下显示，它将不起作用

哦，还有，我也想用css样式，还有什么我能做的吗？因为我已经在javascript中使用了ID，所以我不能再在css中使用ID了。我试着用“名字”，但根本不起作用

请帮忙！提前谢谢

有几个明显的问题：

您正在调用

change\u display（display）

，但尚未创建/填充名为

display

的变量。不能有多个具有相同id的元素。不能通过id直接访问html元素-必须使用id获取对该元素的引用

一些小事情我们会马上清理：

body

的

load

事件不需要调用

change\u 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

非常感谢你的建议。我会记住它，代码工作得很好，非常感谢！

<!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

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";
    }
}