js 多层叠的TAB选项卡

更新时间：2010年01月25日 22:32:09 作者：

一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。

HTML：多个导航tag加一个放置默认内容div
脚本：以数组的形式给出每个导航对应的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" xml:lang="zh"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>多层叠TAB选项卡</title> <style type="text/css"> .nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padding:2px; overflow:hidden; } .nonstop span { float:left;_display:inline; cursor:pointer; width:22px; height:14px; background:#cdcdcd url(./img/button.gif) no-repeat -175px top; font-size:10px; line-height:14px; margin:2px 0 0 2px; display:inline; text-align:center; } .nonstop span:hover { background:gray; font-weight:bold } .nonstop div { height:300px; clear:both; border:1px solid #cdcdcd; border-width:2px 1px; margin-left:2px; overflow:hidden; } .nonstop div a { float:left; width:80px; height:40px; background:white; text-align:center; line-height:40px; padding-top:8px; margin:1px 0 0 1px; } .nonstop div a img { border:0; } .nonstop span.hot { border:1px solid red; width:20px; color:white; height:15px; background:red url(./img/button.gif) no-repeat -175px -14px; font-weight:bold; border-bottom:none; } </style> </head> <body> 一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。HTML：多个导航tag加一个放置默认内容div脚本：以数组的形式给出每个导航对应的html <div class="nonstop" id="a2zbox"> ABCDEFG HI JMLNO PSTUYZ! <div> 这里放一些默认内容 11111111 </div> </div> <script type="text/javascript"> //20个字母下的品牌，不包含默认显示的内容 var contHtml = ['a1','b2','c3','d4','e5','f6','g7','h21','i22','j23','m24','l25','n26','o27','p11','s12','t13','u14','y15','z16']; var a2zBox = document.getElementById("a2zbox"); var a2zTag = a2zBox.getElementsByTagName("span"); var a2zCont = a2zBox.getElementsByTagName("div")[0]; var divs = [],colN=Math.floor(a2zCont.clientWidth/(a2zTag[0].clientWidth))//7; for(var n=1; n<a2zTag.length/colN; n++){ divs[n-1] = document.createElement("div"); divs[n-1].style.display = "none"; a2zBox.insertBefore(divs[n-1],a2zTag[colN*n]); } divs.push(a2zCont); var hotbox = divs.length-1;//初始内容div ID var hotboxH = a2zCont.clientHeight; //内容div高度 var hotboxHtemp = hotboxH; var time = 50, space = 100;//滑动速度 contHtml.push(a2zCont.innerHTML); function TABS(T){ for( i=0; i<a2zTag.length; i++ ) //a2zTag[i].removeAttribute("class"); a2zTag[i].className=""; a2zTag[T].className = "hot"; var N=Math.ceil((T+1)/colN-1); divs[N].style.cssText = "display:block;border-color:red"; divs[N].innerHTML = contHtml[T]; if(N!=hotbox){ divs[N].style.height = 0; divs[hotbox].style.border = 0 ; var wane = setInterval(function(){ hotboxH -= space; divs[hotbox].style.height = hotboxH + "px"; divs[N].style.height = (hotboxHtemp - hotboxH ) + "px"; if(divs[hotbox].clientHeight < 1){ clearInterval(wane); divs[hotbox].style.cssText = "display:none"; hotbox=N; hotboxH = hotboxHtemp; } },time); } } Function.prototype.bind = function(){var __m = this; var arg = arguments; return function(){ __m.apply(window,arg); } } for( i=0; i<a2zTag.length; i++ ) a2zTag[i].onclick = TABS.bind(i); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

前端高频面试题之JS中堆和栈的区别和浏览器的垃圾回收机制
本文给大家分享前端高频面试题JS中堆和栈的区别和浏览器的垃圾回收机制,本文分文别类给大家介绍了栈(stack)和堆(heap)的区别基本类型和引用类型的相关知识,浏览器垃圾回收机制包括基本概念给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
Javscript调用iframe框架页面中函数的方法
这篇文章主要介绍了Javscript调用iframe框架页面中函数的方法,可实现iframe之间传值或修改值,是非常实用的技巧,需要的朋友可以参考下
2014-11-11
js input输入百分号保存数据库失败的解决方法
这篇文章主要介绍了js input输入百分号保存数据库失败的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-05-05
JSON遍历方式实例总结
这篇文章主要介绍了JSON遍历方式,结合实例形式总结分析了JavaScript操作json实现遍历的常用技巧,并给出了实例总结,需要的朋友可以参考下
2015-12-12
js 全世界最短的IE浏览器判断代码
以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。
2010-05-05
JavaScript中几种时间格式之间的简单转换
近期在练习或写项目时经常会遇到时间格式的转换问题,今天我就来总结一下,这篇文章主要给大家介绍了关于JavaScript中几种时间格式之间的简单转换,需要的朋友可以参考下
2024-01-01
前端技巧之js-md5的简单使用方法
这篇文章主要给大家介绍了关于前端技巧之js-md5的简单使用,js-md5是一种前端加密算法,用于在前端对密码等敏感信息进行加密,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
这篇文章主要介绍了微信小程序swiper组件实现抖音翻页切换视频功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
js实现文本框选中的方法
这篇文章主要介绍了js实现文本框选中的方法,涉及javascript中select()方法的使用技巧,需要的朋友可以参考下
2015-05-05
javascript日期对象格式化为字符串的实现方法
本篇文章主要是对javascript日期对象格式化为字符串的实现方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01

js 多层叠的TAB选项卡

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具