<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. (转)HiddenField控件的使用

    ASP.NET2.0 HiddenField控件(1)2007-05-12 23:18HiddenField控件顾名思义就是隐藏输入框的服务器控件,它能让你保存那些不需要显示在页面上的且对安全性要求不 ...

  2. angularjs中关于ng-if的一些理论

    ng-if简介: ● 使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素.如果赋值给ng-if 的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重 ...

  3. C++中的析构函数

    代码: #include <cstdio> #include <iostream> using namespace std; class A{ public: ~A(){ co ...

  4. [目录][Leetcode] Leetcode 题解索引

    之前想边做题边写结题报告,发现有点力不从心,而且很多地方也是一知半解,现在重新做题,重新理解.这篇文章主要起一个目录的作用. 目前没有什么特定的顺序,基本都是看心情翻牌的,哈哈~ 我在Github上新 ...

  5. MySql中查询表中的列名

    例如我的数据库名为"example",使用 USE example; 确定使用example数据库.使用 show tables; 显示数据库中的所有表.使用 DESC perso ...

  6. Python同时向控制台和文件输出日志logging的方法 Python logging模块详解

    Python同时向控制台和文件输出日志logging的方法http://www.jb51.net/article/66756.htm 1 #-*- coding:utf-8 -*- 2 import ...

  7. SpringMVC项目中中文字符乱码问题及解决办法总结（非专业最优解决办法） -- ajax传值乱码; request.getParameter()乱码;

    情况一: ajax中传值时是乱码(后台可以获取到中文字符,但用@ResponseBody返回时前台为乱码) 情况二: Controller 中 request.getParameter()获取到的是乱 ...

  8. 手机网页中的hover效果实现

    js文件 function mouseout(obj) { var className ="hover"; var _ecname = obj.className; if (_ec ...

  9. 文成小盆友python-num11－（1） 线程 进程 协程

    本节主要内容 线程补充 进程 协程 一.线程补充 1.两种使用方法 这里主要涉及两种使用方法,一种为直接使用,一种为定义自己的类然后继承使用如下: 直接使用如下: import threading d ...

  10. C语言初学 俩数相除问题

    #include<stdio.h> #include<stdlib.h> main() { double a,b;                       scanf(&q ...