效果演示：

具体代码：

<!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. （Problem 36）Double-base palindromes

    The decimal number, 585 = 10010010012(binary), is palindromic in both bases. Find the sum of all num ...

  2. Windbg调试命令详解（1）

    转载注明>> [作者:张佩][镜像:http://www.yiiyee.cn/Blog] 1. 概述 用户成功安装微软Windows调试工具集后,能够在安装目录下发现四个调试器程序,分别是 ...

  3. error: property&#39;s synthesized getter follows Cocoa naming convention for returning &#39;owned&#39; objects

    出现这样的情况,主要是属性名中包括  keyword. You can solve this by: Renaming that property: @property (strong, nonato ...

  4. Java面试题之一

    下面也将收集一些经典的java面试题,琢磨这些面试题还是非常有好处,可以弄清楚一些容易混淆的知识点,下面面试题的答案部分来自网络,有些来自自己的理解,都是自己精心归纳整理的,有问题的地方,希望大家指出 ...

  5. Android 一个绚丽的loading动效分析与实现！

    http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...

  6. MVC 返回 view

    RedirectToAction(),即直接返回相同Controller的Index方法: 这个方法还有其他重载方法,比如第二个参数是Controller名,可以指定其他Controller下的Vie ...

  7. dhtmlx之dhtmlXGrid显示数据 --大数据

    引用 <link href="../../dhtmlXGridScripts/dhtmlxgrid.css" rel="stylesheet" type= ...

  8. 【Oracle】ORA-06550 PLS-00201

    ORA-06550 第1行,第7页 PLS-00201 必须声明标识符“PROC_****” 改错了首先检查连接的数据库库里面有没有这个存储过程.(检查是否配置对了数据库)

  9. LINQ简单案例

    1.在visual studio 创建一个解决方案,新建一个控制台程序Kong 2.新建两个类,分别为Master 类和Kongfu类  Master类中包含成员如下,并重写ToString方法 na ...

  10. A - Prime Ring Problem（素数环，深搜，打表）

    Description A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ..., n into ...