首 页 | 模 板 | 学 院 | 源 码 | 书 籍 | 壁 纸 | 字 体 | JS脚本 | FLASH源码 | 软 件 | 矢 量 | 服务器软件 | 素 材 | 其 它 |
设为主页
加入收藏
联系站长
平面设计 | 网页制作 | 程序编写 | 数 据 库 | 媒体动画 | 网络冲浪 | 服务器相关 | 站长乐园 | 业界动态 |
当前在线
CSS+JS实现的选项卡效果(html组件)
2006-12-19 14:38:19  作者:模板天下收集整理  来源:未知 网友评论 0 条 论坛
  

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html lang="us-en">
<head>
<title><a href="http://www.knowsky.com/article.asp?typeid=38">CSS</a>选项卡(html组件)</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" "/>
<meta name="description" content="" />
<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;}
</style>
<script type="text/<a href="http://www.knowsky.com/article.asp?typeid=36">javascript</a>">
var shq={}
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
        if(/a/i.test(e.tagName)){
        e.parentNode.className=e.className;
        e.parentNode.nextSibling.innerHTML=e.innerHTML;
        e.parentNode.nextSibling.style.cssText='border-top:none';
        e.blur();
        }
}
</script>
</head>
<body>
<div class="card">
<div onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</div><div class="content"></div>
</div>

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

<div class="card">
<div onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</div><div class="content"></div>
</div>
</body>
</html><script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>

共分1页  [1] 

>> 相关文章

关于网站 | 客服中心 | 服务条款 | 友情链接 | 广告联系 | 本站历程 | 网站导航

吉ICP备05000107号