<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. java中IO递归写入

    package cn.stat.p1.file; import java.io.BufferedWriter; import java.io.File; import java.io.FileWrit ...

  2. （四）backbone - DEMO - 通信录

    DEMO介绍 是DEMO - User List 的扩展,增加查询 大体实现 •创建Contact Model var Contact = Backbone.Model.extend({ defaul ...

  3. 一种用css实现图片在父框中等比缩放并垂直居中的办法

    一个网页中往往会有很多图片,而网站的编辑上传图片时可能并不一定按照为父框设定的那个宽高来传,这样图片往往会将父框撑开或者被父框截断.一种比较好的解决的办法是这样的: HTML代码结构: <div ...

  4. Membership修改密码

    MembershipUser mu = Membership.GetUser(labelUserName.Text.Trim());//获取资格用户 try { bool flat = mu.Chan ...

  5. Activiti工作流学习-----基于5.19.0版本(7)

    八.BPMN 2.0流程图详解 BPMN 2.0的标准的出现是好事,用户不在被某个工作流开发商绑架或者在工作流中开发妥协,Activiti作为BPMN标准的一套解决方案,使得用户在选择工作流框架时可以 ...

  6. linux内核学习之三：linux中的"32位"与"64位"

    在通用PC领域,不论是windows还是linux界,我们都会经常听到"32位"与"64位"的说法,类似的还有"x86"与"x86 ...

  7. Python 变量有效范围

  8. (转) 如何命令查找linux系统版本！

    一.查看内核版本命令: 1) [root@SOR_SYS ~]# cat /proc/versionLinux version 2.6.18-238.el5 (mockbuild@x86-012.bu ...

  9. Ubuntu12.04 下svn服务搭建及Windows客户端tortoisesvn的使用

    在Ubuntu服务端搭建apache+svn 在客户端使用Tortoisesvn工具. 第一步 安装SVN $sudo apt-get install subversion 安装成功后系统会自动建立一 ...

  10. substr vs substring

    javascript(js)中的 substring和substr方法 Posted on 2009-02-26 14:14 chinaifne 阅读(33698) 评论(0) 编辑 收藏 1.sub ...