麦鸡的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 相关文章推荐
得到form下的所有的input的js代码
Nov 07 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
js实现简易拖拽的示例
Oct 26 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
pandas object格式转float64格式的方法
2018/04/10 Python
python 判断网络连通的实现方法
2018/04/22 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python字典的遍历3种方法详解
2019/08/10 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
专业销售业务员求职信
2013/11/18 职场文书
大型活动策划方案
2014/01/12 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
南京导游词
2015/02/03 职场文书
初中化学教学反思
2016/02/22 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
Java异常体系非正常停止和分类
2022/06/14 Java/Android