效果演示：

具体代码：

<!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脚本实现选项卡的实例的更多相关文章

  1. js原生实现选项卡功能

    选项卡在js中是一个重要的知识点.他没有那么难,但在工作中却有重要的位置.几乎在每一个网站都能看到选项卡的实例.所以今天写一下选项卡的实现. 我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的 ...

  2. java中调用js脚本

    JDK1.6加入了对Script(JSR223)的支持.这是一个脚本框架,提供了让脚本语言来访问Java内部的方法.你可以在运行的时候找到脚本引擎,然后调用这个引擎去执行脚本.这个脚本API允许你为脚 ...

  3. kettle学习笔记（十）——数据检验、统计、分区与JS脚本

    一.概述 数据剖析和数据检验: 用于数据的检查.清洗 . 统计步骤: 提供数据采样和统计的功能 分区: 根据数据里某个字段的值,拆分成多个数据块.输出到不同的库表和文件中. 脚本: Javascrip ...

  4. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  5. 各浏览器禁用某网站JS脚本的方法 【转】

    某些网站,经常会加载一些非常讨厌的JS脚本,如果我们想禁止这个网站的JS脚本,可以使用下面的方法: 一.IE浏览器 1.在Internet选项中,选择安全选项卡,然后点击受限制的站点,点击下面的站点 ...

  6. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

  7. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...

  8. 通过easyui tab添加的子页面JS脚本必须放在body才生效

    通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码

  9. 详解Linux交互式shell脚本中创建对话框实例教程_linux服务器

    本教程我们通过实现来讲讲Linux交互式shell脚本中创建各种各样对话框,对话框在Linux中可以友好的提示操作者,感兴趣的朋友可以参考学习一下. 当你在终端环境下安装新的软件时,你可以经常看到信息 ...

随机推荐

  1. 纯css画哆啦A梦

    今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...

  2. hive on spark的安装及问题

    配置hive hive-site <property> <name>hive.metastore.uris</name> <value>thrift:/ ...

  3. python中mcmc方法的实现

    MCMC方法在贝叶斯统计中运用很多,MIT发布的EMCEE是实现的比较好的.介绍页面在下面.源代码中examples里的代码可以帮助理解各种功能,特别是line.py 列出了最小二乘法,最大似然法和M ...

  4. 我的Python成长之路---第六天---Python基础（19）---2016年2月20日（晴）

    shelve模块 shelve模块是pickle模块的扩展,可以通过key,value的方式访问pickle持久化保存的数据 持久化保存: 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  5. 深入浅出—JAVA(1)

    1.基本概念 JAVA的工作方式 编写源代码文件--用编译器运行源代码(javac)--编译器会产出字节码--通过JAVA虚拟机读取与执行字节码(jvm). JAVA的程序结构 什么是源文件? 源文件 ...

  6. open和fopen的区别：

    1.缓冲文件系统缓冲文件系统的特点是:在内存开辟一个“缓冲区”,为程序中的每一个文件使用,当执行读文件的操作时,从磁盘文件将数据先读入内存“缓冲区”, 装满后再从内存“缓冲区”依此读入接收的变量.执行 ...

  7. mybatis通用DAO

    扫扫关注"茶爸爸"微信公众号 坚持最初的执着,从不曾有半点懈怠,为优秀而努力,为证明自己而活. 回复:茶爸爸了解他这个人!! 花了几天的时间研究了一下mybatis的源代码,觉得这 ...

  8. Maven2的配置文件settings.xml（转）

    http://maven.apache.org/settings.html简介: 概览当Maven运行过程中的各种配置,例如pom.xml,不想绑定到一个固定的project或者要分配给用户时,我们使 ...

  9. 【Eclipse】修改java代码不强制重启

    找到tomcat的server.xml文件,修改以下代码,重新发布重启.然后修改java代码就可以不用重启了. 将reloadable=“true”改成reloadable="false&q ...

  10. 【Web】throw和throws的区别和用法。

    1.throws关键字通常被应用在声明方法时,用来指定可能抛出的异常.多个异常可以使用逗号隔开.当在主函数中调用该方法时,如果发生异常,就会将异常抛给指定异常对象.如下面例子所示: public cl ...