简洁的CSS滑动门效果,也就是TAB标签切换效果

最新推荐文章于 2023-09-02 16:59:47 发布

weixin_30419799

最新推荐文章于 2023-09-02 16:59:47 发布

阅读量191

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/wangbin/archive/2010/04/09/1707984.html

版权

滑动门效果 - by koyoz

首页
新闻
博客
图片
播客

我是首页

我是新闻

我是博客

我是图片

我是播客

今天写了一个简单的CSS滑动门效果,也就是TAB标签切换效果了.

这个效果能兼容 IE6+, FireFox 2+, Opera8+ 等主流浏览器.

说到兼容,还特别为 Opera 额外加了句兼容的代码, 这里介绍一下:

CSS代码

@media all and (min-width: 0px){/* 自己添加的css样式 */}
/* 例如: */
@media all and (min-width: 0px){#title{height:23px;}}

以下是所有实现的代码:

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门效果 - by koyoz</title>
<style type="text/css">
body {font-size:12px;font-family:Verdana;}
/* 滑动门定义 */
#title{height:24px; *height:23px; width:400px; border-bottom:1px solid #ccc;}
@media all and (min-width: 0px){#title{height:23px;}}
#title ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}
#title ul li {float:left;margin-left:5px;}
#title ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}
#title ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}
/* 内容 */
#content {padding:5px 10px;}
#content div{display:none;}
</style>
</head>
<body>
<div id="title">
<ul>
<li><a href="javascript://" onmouseover="show(0)" class="over">首页</a></li>
<li><a href="javascript://" onmouseover="show(1)">新闻</a></li>
<li><a href="javascript://" onmouseover="show(2)">博客</a></li>
<li><a href="javascript://" onmouseover="show(3)">图片</a></li>
<li><a href="javascript://" onmouseover="show(4)">播客</a></li>
</ul>
</div>
<div id="content">
<div style="display:block">我是首页</div>
<div>我是新闻</div>
<div>我是博客</div>
<div>我是图片</div>
<div>我是播客</div>
</div>
<script type="text/javascript">
function show(n)
{
var o = document.getElementById('title').getElementsByTagName("a");
var c = document.getElementById('content').getElementsByTagName("div");
for(i = 0; l = o.length, i < l; o[i].className = '',c[i].style.display = 'none',i++ );
o[n].className = 'over';
c[n].style.display = 'block';
}
</script>
</body>
</html>

怎么样? 还算简洁吧.

可以把onmouseover改成onclick事件,即可以实现点击切换的效果.

转载于:https://www.cnblogs.com/wangbin/archive/2010/04/09/1707984.html

weixin_30419799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简洁的CSS滑动门效果,也就是TAB标签切换效果

滑动门效果 - by koyoz 首页新闻博客图片播客我是首页我是新闻我是博客我是图片我是播客今天写了一个简单的CSS滑动门效果,也就是TAB标签切换效果了.这个效果能兼容 IE6+, FireFox 2+, Opera8+ 等主流浏览器.说到兼容,还特别为 Opera 额外加了句兼...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。