效果演示：

具体代码：

<!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. 控制台console使用MFC库函数，Cout输出CString的方法

    新建工程的时候选择:Win32 Console Application 在向导的地方勾选MFC头文件支持,确认即可 等待初始化文件完成后,VS2010会自动打开 项目名.cpp的文件 其中int _t ...

  2. python--data type

    1.Python中常见的数据类型有: 数据类型    内建函数 整型    int(),long() 浮点型    float() 字符串型    str() 列表    list() 元组    t ...

  3. 基于visual Studio2013解决C语言竞赛题之前言

    前言:关于VS2013 刚装完VS2013,新的IDE给人全新的编程体验,界面比以前更急简洁漂亮,不多说了,先上图吧 第一次启动VS2013

  4. Linux中查看进程及杀死进程命令

    Linux中想杀死fcitx进程,然后再重启它. root@www.linuxidc.com:/home/zhangbin# ps -e | grep 'fcitx' 3405 ?        00 ...

  5. CMake学习小结

    假定有vegagis工程,工程的目录结构如下: #--vegagis#  |--src 源文件目录#     |--gui 界面工程,输出类型:dll,依赖于QT的QtCore.QtGui.QtXml ...

  6. svn恢复到之前某个版本号

    一直在找svn回滚的方法,这个还是非常有用的,屡试不爽阿 常常因为坑爹的需求,功能要切回到之前的某一个版本号.有两种方法能够实现: 方法1: 用svn merge  1) 先 svn up,保证更新到 ...

  7. git 解决冲突的办法

    在项目中使用git管理,冲突是在所难免的.假设没办法解决冲突,能够试试这个办法. 第一步.对project进行备份,最好是复制到其它目录中 第二步.在cmd命令栏上,进入到project文件夹下.这里 ...

  8. 读懂Swift 2.0中字符串设计思路的改变

    Swift提供了一种高性能的,兼容Unicode编码的String实现作为标准库的一部分.在 Swift2中,String类型不再遵守CollectionType协议.在以前,String类型是字符的 ...

  9. ThinkPHP - CURD增删改查 - 实例 - 搜索功能

    模板代码: /** * 搜索数据 * @return 无返回值 */ public function search(){ //判断并接收参数 //姓名 if ( isset($_POST['usern ...

  10. [转]组合数取模 Lucas定理

    对于C(n, m) mod p.这里的n,m,p(p为素数)都很大的情况.就不能再用C(n, m) = C(n - 1,m) + C(n - 1, m - 1)的公式递推了. 这里用到Lusac定理 ...