麦鸡的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 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
python flask 多对多表查询功能
2017/06/25 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
详谈python read readline readlines的区别
2017/09/22 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
详解Python3中的 input() 函数
2020/03/18 Python
python unichr函数知识点总结
2020/12/16 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
共产党员公开承诺践诺书
2014/05/28 职场文书
优秀毕业生求职信
2014/06/05 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
雷锋电影观后感
2015/06/10 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
创业计划书之宠物店
2019/09/19 职场文书
宪法宣传标语100条
2019/10/15 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python