<!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. [一]初识Ajax

    是什么? 一种网页交换数据的技术 作用: 使页面局部刷新,获取后台数据 怎么做? 调用浏览器内置对象发送异步请求

  2. IOI1998 hdu1828 poj1177 Picture

    写了一发扫描线竟然狂WA不止,hdu死活过不了,poj和当时IOI的数据(还花了我1dsdn积分..)都过了. 然后看到谋篇blog里有评论,把数据拿下来发现WA了. 数据是 20 0 1 11 0 ...

  3. MySQL 统计信息

    200 ? "200px" : this.width)!important;} --> 介绍 数据库维护统计信息的目的主要是为了优化器进行更好的执行优化,首先统计信息是建立在 ...

  4. 微软的.NET示例代码放在Github上了

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:微软的.NET示例代码放在Github上了.

  5. Cocos2d-x 3.0- 在Visual Studio 2012中执行測试项目

    Cocos2d-x - 怎样在Win32执行cpp-tests 2014年4月30日 星期三 小雨 微凉 稍显疲惫 注:本篇文章来自Cocos2d-x官网,小巫仅仅是粗略翻译眼下最新版本号的,教大家怎 ...

  6. Derby使用2—C/S模式

    零.回顾 这部分先来回顾一下上一篇博客中的主要内容.上一篇博客中主要简单介绍了Derby数据的历史,特点,安装以及使用的两种模式.这篇文章主要介绍这两种模式中的一种模式 一.启动服务端程序 第一部分主 ...

  7. Nessus漏洞扫描教程之配置Nessus

    Nessus漏洞扫描教程之配置Nessus 配置Nessus 当安装成功Nessus工具后.就可以使用该工具实施漏洞扫描.为了使用户更好的使用该工具,将介绍一下该工具的相关设置.如服务的启动.软件更新 ...

  8. poj 3253 Fence Repair（优先队列+哈夫曼树）

    题目地址:POJ 3253 哈夫曼树的结构就是一个二叉树,每个父节点都是两个子节点的和. 这个题就是能够从子节点向根节点推. 每次选择两个最小的进行合并.将合并后的值继续加进优先队列中.直至还剩下一个 ...

  9. MySQL主主复制+LVS+Keepalived实现MySQL高可用性1

    http://bestvivi.com/2015/09/09/MySQL%E4%B8%BB%E4%B8%BB%E5%A4%8D%E5%88%B6+LVS+Keepalived%E5%AE%9E%E7% ...

  10. 分享asp.net学习交流社区

    亲们 最近发现一个很好的asp.net学习交流的QQ群——237221223.爱好asp.net的亲们可以加入到大家庭中去哈.大家在一起交流学习