网站导航网页是纯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">
onload=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);
}
}
大家可以下载附件查看效果....
分享到：
相关推荐
纯JavaScript实现的二维码生成库，如`qrcode-generator`或`jquery-qrcode`，能够将任意文本转换为可视化的二维码图像。生成过程包括以下几个步骤： 1. 引入库：在HTML文件中通过`<script>`标签引入相关的JavaScript...
2. **鼠标滑过特效**：为了增加网页的交互性，可以通过CSS或JavaScript实现鼠标滑过时的特效，比如改变字体颜色、背景颜色或者显示隐藏元素等。这部分内容要求学生掌握CSS伪类选择器（如`:hover`）的用法，以及简单...
`tablesorter`是一个非常实用的JavaScript库，它为HTML表格提供了强大的排序功能，不仅适用于纯HTML页面，也兼容JSP、PHP等服务器端渲染技术。 `tablesorter`的核心功能在于它能够监听表格的表头（thead）点击事件...
根据所提供的代码片段及描述，本文将深入探讨“纯JavaScript静态树型”（即不依赖任何框架或库，只用原生JavaScript实现的树形结构）的具体实现方式。 #### 二、关键概念与术语解释 1. **树形结构(Tree Structure)...
这个模板采用纯HTML、JavaScript、jQuery和CSS等前端技术构建，为开发者提供了快速搭建博客网站的基础框架。以下将详细解析这些知识点： 1. **HTML（HyperText Markup Language）**：HTML是网页内容的结构标准，它...
这款插件的核心特性是其纯JavaScript实现，这意味着它不依赖于其他大型库，如jQuery，尽管在标签中提到了jQuery库，但GLightbox本身并不直接使用它。 灯箱（lightbox）是一种网页设计技术，允许用户在当前页面上...
在本文中，我们将深入探讨如何使用纯JavaScript开发一个弹窗插件，不依赖任何外部库，比如jQuery。这个过程对于初学者来说是一个很好的实践项目，它可以帮助你更好地理解和掌握JavaScript的基础知识，以及如何在Web...
该插件完全用JavaScript编写，无需依赖任何外部库，如jQuery，尽管在标签中提到了jQuery库，但实际使用中并不需要。这使得notice.js能在各种环境中轻松集成，特别是对于那些希望避免过多第三方库引入的开发者来说，...
本项目“完全用CSS+JS实现”的日历控件，提供了无需依赖任何外部库的轻量级解决方案。这种控件的实现主要依赖于JavaScript（JS）进行动态交互逻辑处理，以及CSS（层叠样式表）来完成界面的布局和美化。 【描述】: ...
Siema就是这样一款纯JavaScript实现的轻量级且简单的旋转木马库，它不需要依赖任何大型框架如jQuery，因此加载速度快，对性能的影响小，适用于各种类型的项目。 **Siema的核心特性：** 1. **轻量级**：Siema的源...
在网页应用开发中，二维码生成器是一个实用的工具，可以让用户方便地分享信息，比如网站链接、联系信息或者任何文本数据。 【JavaScript】 JavaScript是实现这个功能的核心语言。它是一种解释型、弱类型、基于原型...
这时，可以考虑使用类库或框架，如jQuery UI的Dialog、Bootstrap的Modal，或者纯JavaScript库SweetAlert2，它们提供了更丰富的功能和更好的兼容性。 总之，实现弹出层效果需要结合HTML、CSS和JavaScript，通过合理...
在现代Web开发中，利用HTML和JavaScript生成二维码已经成为...开发者可以根据项目需求选择合适的库，结合前端框架或纯JavaScript实现这一功能。同时，还可以自定义二维码的样式，如颜色、边框等，以满足不同设计需求。
在描述中提到的"js图片转动功能"，指的是利用JavaScript实现的动态图像展示效果。JavaScript是一种轻量级的解释型编程语言，广泛用于网页的交互性增强。在HTML中嵌入JavaScript代码，可以实现图片轮播、动画效果等...
【跨浏览器纯JavaScript QRCode二维码插件】 在现代互联网应用中，二维码作为一种高效的信息传递工具，被广泛应用在各个领域。EasyQRCodeJS是专为解决这一需求而设计的一款强大且灵活的JavaScript库，它允许开发者...
HTML纯静态模板意味着这个模板由HTML文件组成，不包含服务器端的动态脚本，如PHP、ASP或JSP等，因此网站的更新和交互主要依赖于JavaScript和Ajax技术，或者通过链接到API接口来实现动态数据交换。 HTML是一种标记...
6. **切换（Toggle）**：描述中提到的左右切换可能是通过CSS和JavaScript实现的，如Bootstrap的导航 pills 或者纯JS实现的tab切换，让用户体验在注册和登录页面间轻松切换。 接下来，登录页面的设计也遵循类似的...
基于纯JavaScript实现一键分享功能的实现原理及过程主要涉及以下几个知识点： 1. 网页中的按钮链接 实现一键分享功能，最简单直接的方式是为分享按钮添加相应的链接。例如，当用户点击“分享到QQ空间”的链接时，...
这些效果可以通过JavaScript库，如jQuery或纯JavaScript实现。在"tpmo_500_fluidgallery"这个文件名中，"fluid"可能指代流体布局，意味着图片会随着浏览器窗口的大小变化而动态调整大小。 5. **URL链接**："3000套...