效果演示：

具体代码：

<!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. iOS开发之第三方登录微信-- 史上最全最新第三方登录微信方式实现

    项目地址 :    https://github.com/zhonggaorong/weixinLoginDemo 最新版本的微信登录实现步骤实现: 1.在进行微信OAuth2.0授权登录接入之前,在 ...

  2. 我在网站开发中经常用到的几个js函数01

    这是我在最近的一个网站项目中频繁用到的几个js函数,非常实用.包括:1.js获取地址栏参数:2.返回cookies字符串中指定键对应的值:3.json格式的日期转换为正常格式4.清除cookie. / ...

  3. scanf 与 cin 的区别

    在论坛上看到有人提出一个如下的问题,在此总结一下. 原问题: http://topic.csdn.net/u/20110414/22/90d0606c-9876-48e4-9b69-bd8bd8a41 ...

  4. java int and string convert

    int -> String int i=12345; String s=""; 第一种方法:s=i+""; 第二种方法:s=String.valueOf( ...

  5. Apache和Nginx下禁止访问特定的目录或文件

    大家是否测试Apache做了目录禁止浏览后,目录下面的txt文件还是可以显示里面的内容的.例如:http://www.domain.com/test/此访问会报403错误,但是如果test下有很多tx ...

  6. jxl读写excel, poi读写excel,word, 读取Excel数据到MySQL

    这篇blog是介绍: 1. java中的poi技术读取Excel数据,然后保存到MySQL数据中. 2. jxl读写excel 你也可以在 : java的poi技术读取和导入Excel了解到写入Exc ...

  7. BZOJ 1601 [Usaco2008 Oct]灌水

    1601: [Usaco2008 Oct]灌水 Time Limit: 5 Sec  Memory Limit: 162 MB Description Farmer John已经决定把水灌到他的n(1 ...

  8. 在web page中使鼠标右击失效的几种方法

    这里主要介绍两种方法,一种是使用js来处理,还有一种是在html属性中设置. 方法一:js 1: <script language="javascript"> docu ...

  9. “易信”今日正式更新至V1.1版

    热门移动通讯社交应用“易信”今日正式更新至V1.1版,目前用户已可在苹果AppStore和各大Android商店下载.新版本主要包括三大变化:开通公众平台.提供外部分享.强化社交安全,此外包含好友关系 ...

  10. android -- 蓝牙 bluetooth （三）搜索蓝牙

    接上篇打开蓝牙继续,来一起看下蓝牙搜索的流程,触发蓝牙搜索的条件形式上有两种,一是在蓝牙设置界面开启蓝牙会直接开始搜索,另一个是先打开蓝牙开关在进入蓝牙设置界面也会触发搜索,也可能还有其它触发方式,但 ...