document anchors教程文档的制作

<!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>无标题文档</title>
</head>
<frameset rows="*" cols="214,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF0000">
   <frame src=\'#\'" name="leftFrame" scrolling="no" noresize="noresize" id="leftFrame" title="leftFrame" />
   <frame src=\'#\'" name="mainFrame"  id="mainFrame" title="mainFrame" />
</frameset>
</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>无标题文档</title>
<script>
 function change(num)
 {
  var i=(parseInt(num)-1)
  var anchorname=parent.frames[1].document.anchors[i].name
  alert(anchorname);
  parent.frames[1].document.location="2.html#"+anchorname;
 }
</script>
</head>

<body>
<p><a href="#" onmouseover="change('1')">目录1</a></p>
<p><a href="#" onmouseover="change('2')">目录2</a></p>
<p><a href="#" onmouseover="change('3')">目录3</a></p>
<p><a href="#" onmouseover="change('4')">目录4</a></p>
</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>无标题文档</title>
</head>

<body>
<a name="t1"><img src=\'#\'" /1.jpg" width="400" height="300" /></a><br />
<a name="t2"><img src=\'#\'" /2.jpg" width="400" height="300" /></a><br />
<a name="t3"><img src=\'#\'" /3.jpg" width="400" height="300" /></a><br />
<a name="t4"><img src=\'#\'" /4.jpg" width="400" height="300" /></a><br />
</body>
</html>
 

你可能感兴趣的:(document,anchors,教程文档)