麦鸡的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 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
用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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
在PHP中操作Excel实例代码
2010/04/29 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python多进程并行代码实例
2019/09/30 Python
python设置环境变量的作用整理
2020/02/17 Python
Django如何重置migration的几种情景
2021/02/24 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
怎样声明子类
2013/07/02 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
机关节能减排实施方案
2014/03/17 职场文书
租赁意向书范本
2014/04/01 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
文明单位汇报材料
2014/12/24 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS