<style>
 *{ margin:0; padding:0;}
 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:240px;margin:50px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_box { clear:both; border:1px solid #898989; height:100px;}
 .hide{display:none}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.hover(function(){
            $(this).addClass("hover") //当前<li>元素高亮
                   .siblings().removeClass("hover");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
                    .eq(index).show()   //显示 <li>元素对应的<div>元素
                    .siblings().hide(); //隐藏其它几个同辈的<div>元素
        })
    })
//]]>
</script>
</head>
<body>
<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">国际</li>
            <li>科技</li>
            <li>军事</li>
        </ul>
    </div>
    <div class="tab_box">
         <div>国际</div>
         <div class="hide">科技</div>
         <div class="hide">军事</div>
    </div>
</div>
</body>

jquery悬停tab的更多相关文章

  1. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  3. js和jquery实现tab选项卡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 打造简易可扩展的jQuery/CSS3 Tab菜单

    原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...

  5. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. 自写Jquery插件 Tab

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...

  7. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  8. 基于jQuery悬停弹出遮罩显示按钮代码

    今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  9. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

随机推荐

  1. 规约模式(Specification Pattern)

    前期准备之规约模式(Specification Pattern) 一.前言 在专题二中已经应用DDD和SOA的思想简单构建了一个网上书店的网站,接下来的专题中将会对该网站补充更多的DDD的内容.本专题 ...

  2. 学习okhttp wiki--HTTPS

    HTTPS OkHttp尝试平衡两个相互竞争的要素: 连通性(Connectivity):连接到尽可能多的服务器.这包括运行最新版本 boringssl 的服务器和不太过时的老版本 OpenSSL 的 ...

  3. Hashtable键值集合

    //Hashtable键值集合 键必须是维一的 类似于索引 Hashtable ht = new Hashtable(); ht.Add(, "中国"); ht.Add(, ); ...

  4. JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com",&quo ...

  5. 《图解CSS3》——笔记（二）

    作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月15日15:58:11 第二章  CSS3选择器 2.1  认识CSS选择器 2.1. ...

  6. flask开发restful api系列(1)

    在此之前,向大家说明的是,我们整个框架用的是flask + sqlalchemy + redis.如果没有开发过web,还是先去学习一下,这边只是介绍如果从开发web转换到开发移动端.如果flask还 ...

  7. uC/OS-II内核架构解析（2）---uC/OS-II基本介绍(转)

    1. uC/OS-II文件结构 2. uC/OS-II组成部分 uC/OS-II大致可以分成系统核心(包含任务调度).任务管理.时间管理.多任务同步与通信.内存管理.CPU移植等部分. (1) 核心部 ...

  8. 一个poi操作实现导出功能的类

    public class ExportExcel<T> { public void exportExcel(Collection<T> dataset, OutputStrea ...

  9. 使用GCD的dispatch_once创建单例

    使用GCD的dispatch_once创建单例 介绍了创建单例的方式,不过后来发现其实在ios 4.0后有更加简单的方式. 就是使用GCD的功能 代码如下: + (instantClass *)sha ...

  10. [原创]零基础R语言教程---第一课---认识R语言

    教程的录制的确是折腾了一番,一连录了二十多遍,有时候激动的说错了字,有时候不知道下一句说啥.. 不过好在第一课已经搞定了,哈哈. 虽然内容现在看起来还有点简单, 不过牛b也是一个过程嘛. 我会坚持下去 ...