繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 麦鸡的TAB切换功能结合了javascript和css
- Javascript
- 实现表格中行点击时的渐扩效果！
- 多图展示滑动过渡效果
- 弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。
- 拖动Html元素集合 Drag and Drop any item
- 脚本吧 - 幻宇工作室用到js,超强推荐base.js
- 使用透明叠加法美化文件上传界面
- JavaScript高级程序设计
- 对象的类型：本地对象(1)
- 如何实现表格中行点击时的渐扩效果！
- 使用button标签，实现三态图片按钮
- 根据分辩率调用不同的CSS.
- Web版彷 Visual Studio 2003 颜色选择器
- JS中简单的实现像C#中using功能（有源码下载）
- js之WEB开发调试利器:Firebug 下载
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- jQuery 1.0.4 - New Wave Javascript(js源文件)
- 强悍无比的WEB开发好助手FireBug(Firefox Plugin)
- 换肤测试程序js脚本
- xWin之JS版(2-26更新)
- 共享自己写一个框架DreamScript
Javascript 中的 麦鸡的TAB切换功能结合了javascript和css
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 80 ::
收藏到网摘: n/a
这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了
做个滑动门,需要一个图片
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/tech/20091012/20091012085842_e2c420d928d4bf8ce0ff2ec19b371514.gif) no-repeat 0 -24px
}
.nav dt a span{
display: block; padding:0 15px 0 0; margin:0 0 0 15px;
background:url(/upload/tech/20091012/20091012085842_e2c420d928d4bf8ce0ff2ec19b371514.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
}
演示地址
评论 (0) All
