用js实现纯html按类型显示网站链接库-CSDN博客

网站导航网页是纯html的，不用数据库，不用jsp，这时候，我们可以将网站的链接信息放到js数组中，需要的时候可以来获取，当然，这可能会影响到小小的性能，当网站链接库数据量非常大是而浏览器使用IE是极有可能面临崩溃的问题...

下面是我的实现思路,,,请慎重用于实际项目中...

more.html

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>显示更多网站</title>
	<script type="text/javascript" src="more.js"></script>
	<style type="text/css">
		 a{ text-decoration:none; color:orange;}
		 a:hover{ text-decoration:underline; color:red;}
</style>
</head>
<body>
	<table align="center">
		<tbody id="show"></tbody>	
	</table>
</body>
	<script type="text/javascript">
		οnlοad=init;
		function init(){
			show(1,"show");//show是table的id,如要换成ul显示修改more.js中的show方法则可
		}
	</script>
</html>

more.js

var more=[];
/*
type: 网站类型
level:优先等级！等级越高，网站排列越靠前  例如：if(level==1)等级是最高的
name：网站的名称
loc:网站地址
logo:网站的logo(这个是个扩展内容)

*/
function add(type,level,name,loc,logo){
	var json={"type":type,"level":level,"name":name,"loc":loc,"logo":logo};
	more.push(json);
}
//这个方法专门用来管理链接库....我们可以当做是一个js数据库吧...类似xml
function  initialization(){
	add(1,2,"百度","www.baidu.com");	
	add(1,3,"谷歌","www.google.com");
	add(1,4,"雅虎搜索","www.yahoo.com.cn");
	add(1,2,"xxxx","www.taobao.com");
	add(1,1,"淘宝","www.taobao.com");
	add(2,1,"中国中央电视台","www.cctv.com");
}
function getLocationByType(type){
	initialization();
	var temp=[];
	for(var i=0;i<more.length;i++){
		if(more[i].type==type){
			temp.push(more[i]);
		}
	}
	return sort(temp);
}
function sort(array){
	var temp="";
	var setp=array.length-1;
	for(var i=0;i<setp;i++){
		for(var j=0;j<setp-i;j++){
			if(array[j].level>array[j+1].level){
				temp=array[j];
				array[j]=array[j+1];
				array[j+1]=temp;
			}
		}	
	}
	return array;
}
//这个方法是显示链接库的方式...可以随意改动的
function show(type,objId){
	var array=getLocationByType(type);
	var show=document.getElementById(objId);
	var max=0;
	var rowCount=5;//在table中一行显示5条数据
	for(var i=1;i<=Math.ceil(array.length/rowCount);i++){
		var tr=document.createElement("tr");
		for(var j=1;j<=rowCount;j++){
			var td=document.createElement("td");
			td.width="100px";
			td.align="center";
			if(max<array.length){
				var a=document.createElement("a");
				a.href="http://"+array[max].loc;
				a.innerHTML=array[max].name;
				max++;
				td.appendChild(a);
			}
			tr.appendChild(td);
	  }
		show.appendChild(tr);
	}	
}

大家可以下载附件查看效果....