麦鸡的TAB切换功能结合了javascript和css


Posted in Javascript onDecember 17, 2007

这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了
做个滑动门,需要一个图片
麦鸡的TAB切换功能结合了javascript和css
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(//f.3water.com/f/6amI1aMS5ueZXQu/b0db7d33117757f54ff88b7a481c0f5b.gif) no-repeat 0 -24px  
}  
.nav dt a span{  
    display: block; padding:0 15px 0 0; margin:0 0 0 15px;  
    background:url(//f.3water.com/f/6amI1aMS5ueZXQu/b0db7d33117757f54ff88b7a481c0f5b.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  
}

演示地址
Javascript 相关文章推荐
收集json解析的四种方法分享
Jan 17 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
用javascript来实现动画导航效果的代码
Dec 16 #Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 #Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 #Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 #Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 #Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 #Javascript
我见过最全的个人js加解密功能页面
Dec 12 #Javascript
You might like
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
JavaScript 异步调用
2017/10/25 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python使用Tesseract库识别验证
2018/03/21 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python实现名片管理系统
2018/11/29 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
实习护理工作自我评价
2013/09/25 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
优秀教师申报材料
2014/12/16 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书