2个回答
展开全部
我把第一列目录变成了三级结构，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic;
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) && document.getElementById(picId)){
obj=document.getElementById(str); //obj 为 DIV 对象
pic=document.getElementById(picId); //pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""; //就将 display 的样式清空
pic.src = "0001.jpg"; //更改图片对象的路径
}else{
obj.style.display = "none";
pic.src = "0000.jpg";
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand;
width: 100px;
}
.div1_1{
cursor: hand;
width: 100px;
color: #666666;
font-size: 14px
}
.div2 {
color: #666666;
font-size: 12px;
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1"> 语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 文言文</div> <br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2"> 数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3"> 副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4"> 副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic;
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) && document.getElementById(picId)){
obj=document.getElementById(str); //obj 为 DIV 对象
pic=document.getElementById(picId); //pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""; //就将 display 的样式清空
pic.src = "0001.jpg"; //更改图片对象的路径
}else{
obj.style.display = "none";
pic.src = "0000.jpg";
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand;
width: 100px;
}
.div1_1{
cursor: hand;
width: 100px;
color: #666666;
font-size: 14px
}
.div2 {
color: #666666;
font-size: 12px;
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1"> 语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 文言文</div> <br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1"> 语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2"> 数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3"> 副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4"> 副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
