电子书的js代码请问，小弟我是新手哈，请指点。
日期：2014-05-16 浏览次数：20619 次
电子书的js代码请教，我是新手哈，请指点。。
想实现的是简单的类似电子书的功能，有左右两个框架，右边显示的是网页。
<html>
<head>
<title> 目录 </title>
<base target= "right ">
<link href= "tree.css " rel= "stylesheet " type= "text/css ">
<script language= "javascript " type= "text/javascript " src= "tree.js ">
</script>
</head>
<BODY onclick= "menuChange(); ">
<pre style= "font-family: '楷体_GB2312 ';font-size:large;color:#000066 "> 我的电子书 <hr> </pre>
<span ID= "menu1 " CLASS= "menu "> 根节点 </span>
<div ID= "submenu1 " STYLE= "display:None ">
<div CLASS= "indent ">
<a href= "47.html "> 子节点1 </a> <br>
<a href= "48.html "> 子结点2 </a> <br>
</div>
</div> <br>
</BODY>
</html>
/*下面的就是点击事件，文件tree.js就只有这个函数！！*/
function menuChange()
{
var src;
var subId;
src=window.event.srcElement;
if(src.className== "menu ")
{
subId= "sub "+src.id;
if(document.all(subId).style.diaplay== "none ")
{
document.all(subId).style.display= "block ";
}
else
{
document.all(subId).style.diaplay= "none ";
}
}
}
问的是可以实现点击根目录可以打开下面的子节点了，但是再单击根节点为什么不能够缩回去呢，子节点还是在那里啊，没有反应！！我想是上面的函数错了的啊，不懂啊。实在看不出来的。。
------解决方案--------------------
我看到的
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 仿QQ导航菜单－www.51windows.Net </title>
<style type= "text/css ">
.titleStyle{
background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
}
.contentStyle{
background-color:#eeffee;color:blue;font-size:9pt;
}
a{
color:blue;
}
body{
font-size:9pt;
}
</style>
</head>
<body>
<script language= "JavaScript ">
<!--
var layerTop=20; //菜单顶边距
var layerLeft=30; //菜单左边距
var layerWidth=140; //菜单总宽
var titleHeight=20; //标题栏高度
var contentHeight=200; //内容区高度
var stepNo=10; //移动步数，数值越大移动越慢
var itemNo=0;runtimes=0;
document.write( ' <span id=itemsLayer style= "position:absolute;overflow:hidden;border:1px solid #008800;left: '+layerLeft+ ';top: '+layerTop+ ';width: '+layerWidth+ '; "> ');
function addItem(itemTitle,itemContent){
itemHTML= ' <div id=item '+itemNo+ ' itemIndex= '+itemNo+ ' style= "position:relative;left:0;top: '+(-contentHeight*itemNo)+ ';width: '+layerWidth+ '; "> <table width=100% cellspacing= "0 " cellpadding= "0 "> '+
' <tr> <td height= '+titleHeight+ ' onclick=changeItem( '+itemNo+ ') class= "titleStyle " align=center> '+itemTitle+ ' </td> </tr> '+
' <tr> <td height= '+contentHeight+ ' class= "contentStyle "> '+itemContent+ ' </td> </tr> </table> </div> ';
docu
想实现的是简单的类似电子书的功能，有左右两个框架，右边显示的是网页。
<html>
<head>
<title> 目录 </title>
<base target= "right ">
<link href= "tree.css " rel= "stylesheet " type= "text/css ">
<script language= "javascript " type= "text/javascript " src= "tree.js ">
</script>
</head>
<BODY onclick= "menuChange(); ">
<pre style= "font-family: '楷体_GB2312 ';font-size:large;color:#000066 "> 我的电子书 <hr> </pre>
<span ID= "menu1 " CLASS= "menu "> 根节点 </span>
<div ID= "submenu1 " STYLE= "display:None ">
<div CLASS= "indent ">
<a href= "47.html "> 子节点1 </a> <br>
<a href= "48.html "> 子结点2 </a> <br>
</div>
</div> <br>
</BODY>
</html>
/*下面的就是点击事件，文件tree.js就只有这个函数！！*/
function menuChange()
{
var src;
var subId;
src=window.event.srcElement;
if(src.className== "menu ")
{
subId= "sub "+src.id;
if(document.all(subId).style.diaplay== "none ")
{
document.all(subId).style.display= "block ";
}
else
{
document.all(subId).style.diaplay= "none ";
}
}
}
问的是可以实现点击根目录可以打开下面的子节点了，但是再单击根节点为什么不能够缩回去呢，子节点还是在那里啊，没有反应！！我想是上面的函数错了的啊，不懂啊。实在看不出来的。。
------解决方案--------------------
我看到的
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 仿QQ导航菜单－www.51windows.Net </title>
<style type= "text/css ">
.titleStyle{
background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
}
.contentStyle{
background-color:#eeffee;color:blue;font-size:9pt;
}
a{
color:blue;
}
body{
font-size:9pt;
}
</style>
</head>
<body>
<script language= "JavaScript ">
<!--
var layerTop=20; //菜单顶边距
var layerLeft=30; //菜单左边距
var layerWidth=140; //菜单总宽
var titleHeight=20; //标题栏高度
var contentHeight=200; //内容区高度
var stepNo=10; //移动步数，数值越大移动越慢
var itemNo=0;runtimes=0;
document.write( ' <span id=itemsLayer style= "position:absolute;overflow:hidden;border:1px solid #008800;left: '+layerLeft+ ';top: '+layerTop+ ';width: '+layerWidth+ '; "> ');
function addItem(itemTitle,itemContent){
itemHTML= ' <div id=item '+itemNo+ ' itemIndex= '+itemNo+ ' style= "position:relative;left:0;top: '+(-contentHeight*itemNo)+ ';width: '+layerWidth+ '; "> <table width=100% cellspacing= "0 " cellpadding= "0 "> '+
' <tr> <td height= '+titleHeight+ ' onclick=changeItem( '+itemNo+ ') class= "titleStyle " align=center> '+itemTitle+ ' </td> </tr> '+
' <tr> <td height= '+contentHeight+ ' class= "contentStyle "> '+itemContent+ ' </td> </tr> </table> </div> ';
docu
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
