您的位置：首页 > Web前端 > CSS

CSS选项卡效果代码演示

2009-12-28 11:20 375 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选项卡效果代码演示</title>
</head>
<body>

<mce:style type="text/css"><!--
div.card div{
background-color:#FF8000;
float:left;
padding:1px;
padding-bottom:0;
clear:both;
width:405px;
}
div.card a{
color:black;
font-size:14px;
text-decoration:none;
float:left;
width:100px;
text-align:center;
background-color:white;
margin-right:1px;
}
div.card div.home a.home{
font:normal normal bold 14px/1.5 宋体;
}
div.card div.international a.international {
font:normal normal bold 14px/1.5 宋体;
}
div.card div.sport a.sport{
font:normal normal bold 14px/1.5 宋体;
}
div.card div.finance a.finance{
font:normal normal bold 14px/1.5 宋体;
}
div.card div.content{
background-color:white;
border:1px solid #ff8000;
height:100px;
}
--></mce:style><style type="text/css" mce_bogus="1">div.card div{
background-color:#FF8000;
float:left;
padding:1px;
padding-bottom:0;
clear:both;
width:405px;
}
div.card a{
color:black;
font-size:14px;
text-decoration:none;
float:left;
width:100px;
text-align:center;
background-color:white;
margin-right:1px;
}
div.card div.home a.home{
font:normal normal bold 14px/1.5 宋体;
}
div.card div.international a.international {
font:normal normal bold 14px/1.5 宋体;
}
div.card div.sport a.sport{
font:normal normal bold 14px/1.5 宋体;
}
div.card div.finance a.finance{
font:normal normal bold 14px/1.5 宋体;
}
div.card div.content{
background-color:white;
border:1px solid #ff8000;
height:100px;
}</style>

<mce:script type="text/javascript"><!--
//生成一个shq空对象
var shq={}
shq.cmenu=function(e) {
//兼容ie和firefox
//如果是ie则e=window.event.srcElement, 否则e=e.target
var e = window.event ? window.event.srcElement:e.target;
// /a/i, 标识一个匹配a或者A的正则, 判断e.tagName即标签名是不是<a />
if(/a/i.test(e.tagName)){
//触发事件的a标签class属性赋给它的父标签id="menu"的class属性
e.parentNode.className=e.className;
//触发事件的a标签里的内容赋给它的父标签的下一个兄弟元素id="content"
e.parentNode.nextSibling.innerHTML=e.innerHTML;
e.parentNode.nextSibling.style.cssText='border-top:none';
//使a标签失去焦点,其实就是去除虚线框
e.blur();
}
}
// --></mce:script>

</head>
<body>
<div class="card" id="main">
<div id="menu" onclick="shq.cmenu(event)">
<a href="#" mce_href="#" class="home">国内</a>
<a href="#" mce_href="#" class="international">国际</a>
<a href="#" mce_href="#" class="sport">体育</a>
<a href="#" mce_href="#" class="finance">财经</a>
</div>
<div class="content" id="content">
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航