Question

我在这里使用javascript来显示/隐藏文字。以下是我想要实现的图片，如下图所示： alt text

以下是我的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。我曾尝试使用“名称”但根本不起作用。

请帮忙！提前谢谢！

Answer 1

一些明显的问题：

您正在调用change_display(display)，但您尚未创建/填充名为display的变量。你不能有多个具有相同id的元素。您不能通过id直接访问html元素 - 您必须使用id获取对它的引用。

我们将立即清理一些小事： change_display的{{1}}事件不需要致电body。从load调用js是不好的形式。

href

的javascript：

<!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帮助！

1 个答案: