CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器

CSS滑动门技术实现TAB标签切换效果实例:
就是我们经常看到的鼠标滑过标签切换页面.可兼容ie,firefox,opera等浏览器.
以下代码是为兼容opera而加的.
@media all and (min-width: 0px){/* 自己添加的css样式 */}
/* 例子: */
@media all and (min-width: 0px){#title{height:23px;}}
代码实例如下: <!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>CSS滑动门技术实现TAB标签切换效果实例 www.corange.cn</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:;" οnmοuseοver="show(0)" class="over">首页</a></li>
<li><a href="javascript:;" οnmοuseοver="show(1)">新闻</a></li>
<li><a href="javascript:;" οnmοuseοver="show(2)">博客</a></li>
<li><a href="javascript:;" οnmοuseοver="show(3)">图片</a></li>
<li><a href="javascript:;" οnmοuseοver="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事件,即可以实现点击切换的效果.

原文地址:http://www.corange.cn/archives/2010/01/3520.html

转载于:https://www.cnblogs.com/ajuanabc/archive/2010/01/24/2462772.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值