内部导航（设置mouseover效果）---原理使用了数组

最新推荐文章于 2022-10-09 22:03:03 发布

???Sir

最新推荐文章于 2022-10-09 22:03:03 发布

阅读量188

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/zhangdapeng89/blog/38482

版权

2019独角兽企业重金招聘Python工程师标准>>>

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';*/
 		@import 'Chapter7/linkedAnchorsTabs.css';
	</style>
	<script language="javascript" type="text/javascript" src="js/DOMhelp.js"></script>
	<script language="javascript" type="text/javascript" src="js/linkedanchors1.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;
		}
		h1,#footer{
			background:#99cc66;
			padding:.2em 20px;
			clear:both;
			width:660px;
		}
		h2{
			font-size:1.2em;
			color:#090;
			margin:.5em 0;
		}
		#toolinfo{
			background:#f8f8f8;
			padding:20px;
			float:left;
			width:660px;
		}
		#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{
			float:left;
		}
		#toolinfo.dyn #toolinfotoc{
			float:left;
			padding:0;
			margin:0;
		}
		#toolinfo.dyn #toolinfotoc li{
			float:left;
			margin:0;
			padding:0;
			list-style:none;
		}		
		#toolinfo.dyn div.infoblock{
			clear:both;
			padding:.5em;
			background:#dde;
		}
		#toolinfo.dyn #toolinfotoc a{
			padding:.2em .5em;
			display:block;
			text-decoration:none;
			font-weight:bold;
			color:#777;
			background:#ccd;
		}		
		#toolinfo.dyn #toolinfotoc a.current{
			text-decoration:none;
			font-weight:bold;
			background:#dde;
			color:#000;
		}

js代码

/**
 * @author Administrator
 */
iv = {
	//Css Classes
	dynamicClass:'dyn',
	currentLinkClass:'current',
	showClass:'show',
	
	//IDs
	parentID:'toolinfo',
	tocID:'toolinfotoc',
	
	//Global properties
	current:null,
	sections:[],
	sectionLinks:[],
	init:function(){
		var targetName,targetElement;
		if(!document.getElementById || !document.createTextNode){
			return;
		}
		var parent = document.getElementById(iv.parentID);
		var toc = document.getElementById(iv.tocID);
		if(!parent || !toc){
			return;
		}
		DOMhelp.cssjs('add',parent,iv.dynamicClass);
		var toclinks = toc.getElementsByTagName('a');
		for(var i=0;i<toclinks.length;i++){
			DOMhelp.addEvent(toclinks[i],'click',iv.getSection,false);
			DOMhelp.addEvent(toclinks[i],'mouseover',iv.getSection,false);
			targetName = toclinks[i].getAttribute('href').replace(/.*#/,'');
			toclinks[i].targetName = targetName;
			if(i==0){
				var presetLink = targetName;
			}
			targetElement = document.getElementById(targetName);
			if(targetElement){
				iv.sections[targetName] = targetElement.parentNode.parentNode;
				iv.sectionLinks[targetName] = toclinks[i];
			}
		}
		var loc = window.location.hash.replace('#','');
		loc = document.getElementById(loc) ? loc : presetLink;
		iv.showSection(loc);
	},
	getSection:function(e){
		var t = DOMhelp.getTarget(e);
		iv.showSection(t.targetName);
	},
	showSection:function(sectionName){
		if(iv.current != null){
			DOMhelp.cssjs('remove',iv.sections[iv.current],iv.showClass);
			DOMhelp.cssjs('remove',iv.sectionLinks[iv.current],iv.currentLinkClass);
		}
		DOMhelp.cssjs('add',iv.sections[sectionName],iv.showClass);
		DOMhelp.cssjs('add',iv.sectionLinks[sectionName],iv.currentLinkClass);
		iv.current = sectionName;
	}
}
DOMhelp.addEvent(window,'load',iv.init,false);

以上作品是在学习中模出来的，其效果与上一篇基本类似，只是原理不同

转载于:https://my.oschina.net/zhangdapeng89/blog/38482