Js脚本实现选项卡的范例
日期：2014-05-16 浏览次数：20370 次
Js脚本实现选项卡的实例
<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><di
效果演示：
具体代码：
<!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><di
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
