时间:2021-05-25
这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了
做个滑动门,需要一个图片
CSS
复制代码 代码如下:
.nav{position:relative}
.navdt{float:left;margin:02px00;position:relative;z-index:2}
.navdta{color:#555;text-decoration:none}
.navdta:hover{color:#000}
.navdta{
float:left;display:block;height:24px;line-height:26px;overflow:hidden;
background:url(/upload/20071217200212700.gif)no-repeat0-24px
}
.navdtaspan{
display:block;padding:015px00;margin:00015px;
background:url(/upload/20071217200212700.gif)no-repeatright-24px
}
.navdt.ona{background-position:00}
.navdt.onaspan{background-position:right0}
.navdd{
background:#fff;border:solid1px#ccc;width:400px;margin:0;padding:10px;
position:absolute;left:0;top:23px;z-index:1;visibility:hidden
}
.navdd.on{visibility:visible}
.navdda{display:block}
xhtml
复制代码 代码如下:
<dlclass="nav"id="maiji_tab">
<dtclass="on">
<ahref="#this"href="#this"onclick="maiji_tab(0)"><span>精品文章</span></a>
</dt>
<dt>
<ahref="#this"href="#this"onclick="maiji_tab(1)"><span>视频</span></a>
</dt>
<dt>
<ahref="#this"href="#this"onclick="maiji_tab(2)"><span>照片</span></a>
</dt><dt>
<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”><span>麦鸡的博客</span></a>
</dt>
<ddclass=”on”>
<p>精品文章啊!<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”>麦鸡的博客欢迎你!</a></p>
</dd><dd>
<p>视频啊!<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”>麦鸡的博客欢迎你!</a></p>
</dd><dd>
<p>你的照片呢?<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”>麦鸡的博客欢迎你!</a></p>
</dd></dl>
javascript
复制代码 代码如下:
varmaiji_tab=function(num){//根据mun添加class,使它显示
vardtArray=document.getElementById('maiji_tab').getElementsByTagName("dt");//获取节点
varddArray=document.getElementById('maiji_tab').getElementsByTagName("dd");
for(vari=0;i<ddArray.length;i++){
dtArray[i].className='';//取消class
ddArray[i].className='';
}
dtArray[num].className='on';
ddArray[num].className='on';//增加class
}
演示地址
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
不用Javascript,使用纯CSS方案,实现类似下图的导航栏切换:CSS的强大之处有的时候超乎我们的想象,Tab切换,常规而言确实需要用到一定的脚本才能实现
tab切换在项目中也算是常用技术,一般实现tab切换都用js或者jq实现,今天介绍两种只用css实现tab切换方法:方法一:原理:通过label标签的关联属性和
本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考,具体如下:选项卡一:JavaScript+html+css/libs/angu
上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例。一、仿”中国人民大
今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式。原生函数写法将一个javascript方法改写为js插件最简单的方式