<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>jQuery</title>
<style>
ul, li{list-style:none;}
#linTab ul li{float:left;width:50px;}
.clearBoth{clear:both;}
.on{display:block;}
.none{display:none;}
</style>
<script src="./jquery/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    $change_li = $(".linListTab li");
    $change_li.each(function(i){
        $(this).mouseover(function(){
            $(this).addClass("on").siblings().removeClass("on");
            $(".linBoxListContent dl").eq(i).show().siblings().hide();
        });
    });
});
</script>
</head>
<body>
<div id="linTab">

<div class="linListTab">
        <ul>
            <li class="on"><a href="javascript:void(0)">第一</a></li>
            <li><a href="javascript:void(0)">第二</a></li>
            <li><a href="javascript:void(0)">第三</a></li>
        </ul>
        <br class="clearBoth" />
    </div>

<div class="linBoxListContent">
        <dl>
            <dd>1111</dd>
        </dl>

<dl class="none">
            <dd>2222</dd>
        </dl>

<dl class="none">
            <dd>3333</dd>
        </dl>    
    </div>

</div>
</body>
</html>

jquery tab mouseover 特效的更多相关文章

  1. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  2. jquery tab

    jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  3. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  4. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  5. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  6. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  7. 简单的jquery tab

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery tab 插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

随机推荐

  1. 查看MySQL数据库表的命令介绍

    如果需要查看MySQL数据库中都有哪些MySQL数据库表,应该如何实现呢?下面就为您介绍查看MySQL数据库表的命令,供您参考. 进入MySQL Command line client下查看当前使用的 ...

  2. web项目设计与开发——DBHelper2

    第二次学习的内容是根据DBHelper遍历出数据库中的所有数据. 具体内容为:   一.编写程序    1.创建工程——userMangager    2.在src目录下创建四个包,分别为DAO,DB ...

  3. linux的nohup disown setsid screen

    ```nohup 可以将进程挂起 帐号退出时不受影响 nohup cp -r a b/ [>/~/cp.log] & setsid 作用类似于nohup swtsid cp -r a b ...

  4. shell脚本结构示例1

    2013年以来自己因为偷懒,少写了很多东西,今年计划把以前积累的总结出来. 先从shell开始写起吧. 干了快3年游戏运维,期间经常会写一些shell本,不少脚本其实有很多可以复用的部分. 按照自己的 ...

  5. 过滤所有的HTML标签

    <script type="text/javascript"> var str = "<p style=color:#FF0000>恩恩,就是就是 ...

  6. .Net程序员快速学习安卓开发-布局和点击事件的写法

    关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 本系列课程 致力于老手程序员可以快速入门学习安卓开发.系统全面的从一个.Net程序员的角度一步步学习总结安 ...

  7. Asp.Net MVC--Controller激活2

    在使用MVC项目中,如果激活控制器,则就会向前台返回action执行的结果. 很多时候,根据需求,手动激活控制器来向客户端返回结果. 一.激活实例代码1 这是在Global文件中使用 var rout ...

  8. DevExpres.XtraLayout控件运行时动态设置数据项

    问题分析: 通常.我们使用XtraLayout控件,是需要做以下的几个步骤来实现的: 1.  在窗体上拖拉一个 LayoutControl控件,设置它的填充属性: 2.  拖拉一些常规编辑控件到Lay ...

  9. MVC小系列（七）【分部视图中的POST】

    MVC小系列(七)[分部视图中的POST] 在PartialView中进行表单提交的作用:1 这个表单不止一个地方用到,2 可能涉及到异步的提交问题 这两种情况都可能需要把表单建立在分部视图上, 使用 ...

  10. TPL(Task Parallel Library)多线程、并发功能

    The Task Parallel Library (TPL) is a set of public types and APIs in the System.Threading and System ...