麦鸡的TAB切换功能结合了javascript和css
2007-12-17 00:00
711 查看
这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了
做个滑动门,需要一个图片
CSS
xhtml
javascript
演示地址
做个滑动门,需要一个图片
CSS
.nav{position:relative} .nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2} .nav dt a{color:#555; text-decoration:none} .nav dt a:hover{color:#000} .nav dt a{ float:left; display:block; height:24px; line-height:26px; overflow:hidden; background:url(/upload/20071217200212700.gif) no-repeat 0 -24px } .nav dt a span{ display: block; padding:0 15px 0 0; margin:0 0 0 15px; background:url(/upload/20071217200212700.gif) no-repeat right -24px } .nav dt.on a{background-position:0 0} .nav dt.on a span{background-position:right 0} .nav dd{ background:#fff; border:solid 1px #ccc; width:400px; margin:0; padding:10px; position:absolute; left:0; top:23px; z-index:1; visibility:hidden } .nav dd.on{visibility:visible} /*-_-!*/ .nav dd a{display:block}
xhtml
<dl class="nav" id="maiji_tab"> <dt class="on"> <a href="#this" href="#this" onclick="maiji_tab(0)"><span>精品文章</span></a> </dt> <dt> <a href="#this" href="#this" onclick="maiji_tab(1)"><span>视频</span></a> </dt> <dt> <a href="#this" href="#this" onclick="maiji_tab(2)"><span>照片</span></a> </dt><dt> <a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”><span>麦鸡的博客</span></a> </dt> <dd class=”on”> <p>精品文章啊!<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麦鸡的博客欢迎你!</a></p> </dd><dd> <p>视频啊!<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麦鸡的博客欢迎你!</a></p> </dd><dd> <p>你的照片呢?<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麦鸡的博客欢迎你!</a></p> </dd></dl>
javascript
var maiji_tab = function(num){//根据mun添加class,使它显示 var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//获取节点 var ddArray = document.getElementById('maiji_tab').getElementsByTagName("dd"); for (var i = 0; i < ddArray.length; i++){ dtArray[i].className = '';//取消class ddArray[i].className = ''; } dtArray[num].className = 'on'; ddArray[num].className = 'on';//增加class }
演示地址
相关文章推荐
- 麦鸡的TAB切换功能结合了javascript和css
- html+css+jQuery+JavaScript实现tab自动切换功能
- 原生javascript实现Tab选项卡切换功能
- 原生javascript实现Tab选项卡切换功能
- 分步解析JavaScript实现tab选项卡自动切换功能
- 用JavaScript结合CSS实现网页换肤功能
- 关于javascript+css(asp.net)实现tab功能
- javascript回车完美实现tab切换功能
- javascript+css 实现tab功能
- javascript回车完美实现tab切换功能
- javascript 回车实现 tab 切换功能完美解决
- javascript+css 实现tab功能
- [原创] javascript使得按左右方向键可以切换链接(模拟Tab和Shift+Tab功能)
- 分步解析JavaScript实现tab选项卡自动切换功能
- Javascript结合css实现网页换肤功能
- javascript+css 实现tab功能
- JavaScript实现的简单Tab点击切换功能示例
- css配合JavaScript实现tab标签切换效果
- javascript使回车键替代tab键的光标移动功能