html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example: Dynamic Linked Anchors (Panel Style)</title>
<style type="text/css">
@import 'Chapter7/linkedAnchorsPanel.css';
</style>
<!-- <script language="javascript" type="text/javascript" src="js/DOMhelp.js"></script>
<script language="javascript" type="text/javascript" src="js/linkedanchors.js"></script> -->
<script language="javascript" type="text/javascript" src="js/DOMhelp.js"></script>
<script language="javascript" type="text/javascript" src="js/linkedanchors.js"></script>
</head>
<body>
<h1>X - a tool that does</h1>
<div id="toolinfo">
<ul id="toolinfotoc">
<li><a href="#info">Information</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#use">Use</a></li>
<li><a href="#license">License</a></li>
<li><a href="#download">Download</a></li>
</ul>
<div class="infoblock">
<h2><a id="info" name="info">Infomation about X</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
<p class="back">
<a href="#toolinfotoc">Back to
<acronym title="Table of Contents">Toc</acronym>
</a>
</p>
</div>
<div class="infoblock">
<h2><a id="demo" name="demo">Demo</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
<p class="back">
<a href="#toolinfotoc">Back to
<acronym title="Table of Contents">Toc</acronym>
</a>
</p>
</div>
<div class="infoblock">
<h2><a id="installation" name="installation">Installation</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
<p class="back">
<a href="#toolinfotoc">Back to
<acronym title="Table of Contents">Toc</acronym>
</a>
</p>
</div>
<div class="infoblock">
<h2><a id="use" name="use">Use</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
<p class="back">
<a href="#toolinfotoc">Back to
<acronym title="Table of Contents">Toc</acronym>
</a>
</p>
</div>
<div class="infoblock">
<h2><a id="license" name="license">License</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
<p class="back">
<a href="#toolinfotoc">Back to
<acronym title="Table of Contents">Toc</acronym>
</a>
</p>
</div>
<div class="infoblock">
<h2><a id="download" name="download">Download</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
<p class="back">
<a href="#toolinfotoc">Back to
<acronym title="Table of Contents">Toc</acronym>
</a>
</p>
</div>
</div>
</body>
</html>
css文件
*{
margin:0;
padding:0;
list-style:none;
border:none;
}
body{
font-size:.87em;
font-family:Arial,Sans-serif;
color:#000;
background:#ccf;
padding:2em;
}
.infoblock{
width:100%;
}
h1,#footer{
background:#99cc66;
padding:.2em .5em;
clear:both;
}
h2{
font-size:1.2em;
color:#090;
margin:.5em 0;
}
#toolinfo{
background:#f8f8f8;
padding:2em;
float:left;
width:auto;
}
#toolinfo a:link,
#toolinfo a:visited,
#toolinfo a:hover,
#toolinfo a:active{
color:#369;
}
#toolinfotoc{
background:#eef;
padding:1em;
}
#toolinfotoc li{
margin-left:1em;
list-style:square;
padding:.2em 0;
}
p.back{
padding:.2em;
text-align:right;
background:#eee;
margin-top:.5em;
}
#toolinfo p.back a:link,
#toolinfo p.back a:visited{
color:#000;
}
/* dynamic styles */
#toolinfo.dyn div.infoblock{
position:absolute;
left:-9999px;
height:1px;
overflow:hidden;
}
#toolinfo.dyn div.show{
position:relative;
height:auto;
overflow:visible;
left:0;
}
#toolinfo.dyn p.back{
display:none;
}
#toolinfo.dyn #toolinfotoc{
width:14%;
margin-right:2%;
float:left;
}
#toolinfo.dyn div.infoblock{
margin-left:19%;
width:80%;
}
#toolinfo.dyn #toolinfotoc a.current{
text-decoration:none;
font-weight:bold;
color:#000;
}
js文件
/**
* @author Administrator
*/
iv = {
//Css Classes
dynamicClass:'dyn',
currentLinkClass:'current',
showClass:'show',
//IDs
parentID:'toolinfo',
tocID:'toolinfotoc',
//Global properties
current:null,
currentLink:null,
init:function(){
if(!document.getElementById || !document.createTextNode){
return;
}
iv.parent = document.getElementById(iv.parentID);
iv.toc = document.getElementById(iv.tocID);
if(!iv.parent || !iv.toc){
return;
}
DOMhelp.cssjs('add',iv.parent,iv.dynamicClass);
var loc = window.location.hash.replace('#','');
var toclinks = iv.toc.getElementsByTagName('a');
for(var i=0;i<toclinks.length;i++){
if(toclinks[i].getAttribute('href').replace(/.*#/,'') == loc){
iv.currentLink = toclinks[i];
}
DOMhelp.addEvent(toclinks[i],'click',iv.getSection,false);
}
if(!iv.currentLink){
iv.currentLink = toclinks[0];
}
iv.showSection(iv.currentLink);
},
getSection:function(e){
var t = DOMhelp.getTarget(e);
iv.showSection(t);
},
showSection:function(o){
var targetName = o.getAttribute('href').replace(/.*#/,'');
var section = document.getElementById(targetName).parentNode.parentNode;
if(iv.current != null){
DOMhelp.cssjs('remove',iv.current,iv.showClass);
DOMhelp.cssjs('remove',iv.currentLink,iv.currentLinkClass);
}
DOMhelp.cssjs('add',section,iv.showClass);
DOMhelp.cssjs('add',o,iv.currentLinkClass);
iv.current = section;
iv.currentLink = o;
}
}
DOMhelp.addEvent(window,'load',iv.init,false);
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
DOMhelp={
//动态添加和移除一个元素的类
cssjs:function(a,o,c1,c2){
switch(a){
case 'swap':
if(!DOMhelp.cssjs('check',o,c1)){
o.className.replace(c2,c1);
}else{
o.className.replace(c1,c2);
}
break;
case 'add':
if(!DOMhelp.cssjs('check',o,c1)){
o.className += o.className ? ' '+c1 : c1;
}
break;
case 'remove':
var rep = o.className.match(' '+c1) ? ' '+c1 : c1;
o.className = o.className.replace(rep,'');
break;
case 'check':
var found = false;
var temparray = o.className.split(' ');
for(var i=0;i<temparray.length;i++){
if(temparray[i]==c1){
found = true;
}
}
return found;
break;
}
},
safariClickFix:function(){
return false;
},
//Find the last sibling of the current node
lastSibling:function(node){
var tempObj = node.parentNode.lastChild;
while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
tempObj = tempObj.previousSibling;
}
return (tempObj.nodeType==1) ? tempObj : false;
},
//Find the first sibling of the current node
firstSibling:function(node){
var tempObj = node.parentNode.firstChild;
while(tempObj.nodeType != 1 && tempObj.nextSibling != null){
tempObj = tempObj.nextSibling;
}
return (tempObj.nodeType==1) ? tempObj : false;
},
//Retrieve the content fo the first text node sibling of the current node
getText:function(node){
if(!node.hasChildNodes()){
return false;
}
var reg=/^\s+$/;
var tempObj = node.firstChild;
while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
tempObj = tempObj.nextSibling;
}
return (tempObj.nodeType == 3) ? tempObj.nodeValue:false;
},
//Set the content of the first text node sibling the current node
setText:function(node,txt){
if(!node.hasChildNodes()){
return false;
}
var reg = /^s+$/;
var tempObj = node.firstChild;
while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
tempObj = tempObj.nextSibling;
}
if(tempObj.nodeType == 3){
tempObj.nodeValue = txt;
}else{
return false;
}
},
//Find the text pr previous sibling that is an element
//and not a text node or line break
//
//1表示下一个兄弟节点，-1表示上一个兄弟节点
closestSibling:function(node,direction){
var tempObj;
if(direction == -1 && node.previousSibling != null){
tempObj = node.previousSibling;
while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
tempObj = tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling != null){
tempObj=tempObj.nextSibling;
while(tempObj.nodeType != 1 && tempObj.textSibling != null){
tempObj = tempObj.nextSibling;
}
}
return tempObj.nodeType==1 ? tempObj : false;
},
//Create a new link containing the given text
createLink:function(to,txt){
var tempObj = document.createElement('a');
tempObj.appendChild(document.createTextNode(txt));
tempObj.setAttribute('href',to);
return tempObj;
},
//Create a new element containing the given text
createTextElem:function(elm,txt){
var tempObj = document.createElement(elm);
tempObj.appendChild(document.createTextNode(txt));
return tempObj;
},
//Simulate a debugging console to avoid the nees for alerts
initDebug:function(){
if(DOMhelp.debug){
DOMhelp.stopDebug();
}
DOMhelp.debug = document.createElement('div');
DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
},
setDebug:function(bug){
if(!DOMhelp.debug){
DOMhelp.initDebug();
}
DOMhelp.debug.innerHTML += bug+'\n';
},
stopDebug:function(){
if(DOMhelp.debug){
DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
DOMhelp.debug = null;
}
},
//Cross-browser event handing for IE5+ ,NS6+ and Mozilla/Gecko
//By Scott Andrew
addEvent:function(elm,evType,fn,useCapture){
if(elm.addEventListener){
elm.addEventListener(evType,fn,useCapture);
return true;
}else if(elm.attachEvent){
var r = elm.attatchEvent('on' + evType,fn);
return r;
}else{
elm['on' + evType] = fn;
}
},
//为了适应在ie下target被srcElement取代
//button返回值的不同
getTarget:function(e){
var target;
if(window.event){
target = window.event.srcElement;
}else if(e){
target = e.target;
}else{
target = null;
}
if(target.nodeName.toLowerCase() != 'a'){
target = target.parentNode;
}
return target;
},
//由于Safari支持stopPropagation方法，但是使用它就什么也做不了，不会阻止事件继续冒泡
stopDefault:function(e){
if(window.event && window.event.returnValue){
window.event.cancelBubble = true;
}
if(e && e.preventDefault){
e.preventDefault();
}
},
//一般情况下都需要阻止stopPropagation()和preventDefault()
cancelClick:function(e){
if(window.event && window.event.cancelBubble && window.event.returnValue){
window.event.cancelBubble = true;
window.event.returnValue = false;
return ;
}
if(e && e.stopPropagation && e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
}
}
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
