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

Js脚本实现选项卡的实例

2013-09-13 20:06 253 查看

效果演示：

具体代码：

<!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>css选项卡(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/javascript">
var shq={}// 首先创建一个空的对象没有任何元素
shq.cmenu=function(e)// 给空对象添加一个方法
{
var e=window.event?window.event.srcElement:e.target;//三元运算符相当于if else 如果window有event属性则变量e的值为window.event.srcElement或则为e.target;这个因该是浏览器event事件兼容问题火狐event事件为局部变量ie为全局变量其它是进行了浏览器测试
if(/a/i.test(e.tagName)){// 正则匹配e.tagName是否为a不区分大小写如果为真就执行里面的代码块
e.parentNode.className=e.className; // e的父节点的class属性等于e的class属性值
e.parentNode.nextSibling.innerHTML=e.innerHTML; // e的父节点的class属性等于e的class属性值innerHTML(html代码) = e的innerHTML代码
e.parentNode.nextSibling.style.cssText='border-top:none'; // e的父节点的下一个子节点的css真接修改为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>

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

标签：

相关文章推荐

新的分享

章节导航