javascript代码实例教程-Js脚本实现选项卡的实例
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Js脚本实现选项卡的实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 效果演示：
具体代码：
<!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">
p.card p{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px;}
p.card a{ color:black; font-Size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px;}
p.card p.home a.home{ font:normal normal bold 14px/1.5 宋体;}
p.card p.international a.international { font:normal normal bold 14px/1.5 宋体;}
p.card p.sport a.sport{ font:normal normal bold 14px/1.5 宋体;}
p.card p.finance a.finance{ font:normal normal bold 14px/1.5 宋体;}
p.card p.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>
<p class="card">
<p onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</p><p class="content"></p>
</p>
<p class="card">
<p onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</p><p class="content"></p>
</p>
<p class="card">
<p onclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</p><p class="content"></p>
</p>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-Js脚本实现选项卡的实例全部内容，希望文章能够帮你解决javascript代码实例教程-Js脚本实现选项卡的实例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件