Js脚本实现选项卡的实例
来源:互联网 发布:python txt转pdf 编辑:程序博客网 时间:2024/04/30 11:18
效果演示:
具体代码:
<!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>
- Js脚本实现选项卡的实例
- 原生JS实现选项卡效果实例
- js 选项卡实现
- JS实现选项卡
- JS实现选项菜单(实例)
- JS实现选项卡之间的切换
- 初学js:选项卡的实现
- JS实现的选项卡切换
- js实现简单的选项卡功能
- js实现选项卡的切换----慕课网
- js实现选项卡的切换
- js 实现选项卡里套选项卡
- js的选项卡
- js的选项卡
- Js+Css 实现选项卡
- css+js实现选项卡
- js实现选项卡效果
- js实现选项卡功能
- “High-Speed, Off-Screen Particles” in Unity
- toj2468 Counting Letters
- iOS 本地化应用
- java中的静态变量、静态方法和静态代码块
- Vim ZenCoding 插件使用教程
- Js脚本实现选项卡的实例
- 埃里克·斯蒂芬·雷蒙(Eric Steven Raymond,1957年12月4日-)
- zend framework 实例
- Android 异步更新UI----AsyncTask
- YOUTH
- C/S结构与B/S结构的特点分析
- 帝国CMS管理员帐号、密码、认证码及安全答案忘记的解决办法
- python学习
- MNP7ZgrIMyZTb