<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悬停tab2的更多相关文章

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

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

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

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

  3. jquery悬停tab

    <style> *{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#66 ...

  4. jquery悬停和移出事件

    $('#hides').mouseover(function () { alert("sdfdsf")}).mouseout(function () { alert("啊 ...

  5. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  6. jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  7. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  8. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  9. jQuery将悬停效果加到菜单项

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Map Resource Definition 中type为 'ArcGIS Server Local'.

    在使用 MapResourceManager, Map进行 地图显示 时, 在 Map Resource Definition 的 type 为 ArcGIS Server Local时概述. 1,打 ...

  2. C#中静态构造函数含义及使用

    static以前都接触过,可是最近才发现了还有静态类的写法,也可能是以前没太注意了,所以自己去研究了一下! 1.什么是构造函数: 1.1 例如:static  Class{} 1.2 使用静态函数的注 ...

  3. 单源最短路径 hdu 2066

    #include<string.h> //和prim类似#include<stdio.h> //prim所考虑的是节点与当前所建成的树的距离最小using namespace ...

  4. js判断一个变量是否为数组的解决方案

    前端开发中,在做项目的时候,我们经常需要对一个变量进行数组类型的判断,当然即使你暂时没遇到,但是这个问题也是大家去面试时的高频问题,有必要拿出来说一说. 大家都知道js中可以使用typeof来判断变量 ...

  5. IOS 通过button获取cell

    在使用tableview时,有时我们需要在cell中添加button和label,以便添加某项功能,而且往往点这个button的方法中需要知道button所在cell中label内存放的值. 一般而言 ...

  6. HTTP发送请求模拟

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.I ...

  7. [poj 1364]King[差分约束详解(续篇)][超级源点][SPFA][Bellman-Ford]

    题意 有n个数的序列, 下标为[1.. N ], 限制条件为: 下标从 si 到 si+ni 的项求和 < 或 > ki. 一共有m个限制条件. 问是否存在满足条件的序列. 思路 转化为差 ...

  8. BZOJ2084: [Poi2010]Antisymmetry

    2084: [Poi2010]Antisymmetry Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 187  Solved: 125[Submit] ...

  9. SQLServer 安装以前的某个程序安装已在安装计算机上创建挂起的文件操作 解决办法

    http://wenku.baidu.com/view/6732fe09844769eae009ede2.html SQL Server 安装以前的某个程序安装已在安装计算机上创建挂起的文件操作 安装 ...

  10. 瑞柏匡丞谈中国移动app的国际进阶路

    当今3.0互联时代,已然形成了一个移动化,互动化,全球化的完整体系.瑞柏匡丞也在常年与国内外客户的交流沟通中有了自己的些许见解. 国内的移动产业的发展已然非常迅速,但也正是因为各类企业的不断崛起,能够 ...