<!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. [二]SpringMvc实践-注解

    1.@RequestMapping("/list")映射访问路径 2.@RequestParam(value="id",required=false)请求参数, ...

  2. JS继承的几种方式

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一. 既然要实现继承,那么我们先定义一个父类: // 定义一个动物类 function Animal (name) { // 属性 this.n ...

  3. Open Dynamics Engine for Linux 安装笔记

    下载 在Bitbucket上可以下载到最新的版本(截止目前为0.14版) 或者直接用wget下载 wget "https://bitbucket.org/odedevs/ode/downlo ...

  4. 从a站点跳转到b站点，通过url的参数判断是否让该用户选择身份

    一.问题的由来 问题是这样子给出来,今天产品那边跟我说,在a网站跳转到b网站时,让用户有一个选择身份的弹窗.因为公司有两个不同站点,你无论在a或者b网站注册后,都可以随便登录这两个站点,进入之后都会有 ...

  5. html传參中？和&amp;

    <a href="MealServlet?type=findbyid&mid=<%=m1.getMealId()%> 在这句传參中?之后的代表要传递的參数当中有两个 ...

  6. ApkTool动态打包

    引言: APK在推广的时候可能会须要动态打包APK.比方公布到不同渠道的时候,须要在manifest文件里改动渠道信息.或者app在推广的时候.须要在apk包里面加上推广人信息等. 环境变量: 1.J ...

  7. android之自定义ViewGroup和自动换行的布局的实现

    viewgroup简单说就是可以装view的view.今天遇到一个问题,就是需要一个可以自动根据一行中view的宽度自动换行的布局,网上 找了下,没有相关的例子,但是找到了思路:自定义一个viewgr ...

  8. MantisBT

    官方网站:http://www.mantisbt.org/ MantisBT is a free popular web-based bugtracking system (feature list) ...

  9. 解决Android拍照保存在系统相册不显示的问题

    可能大家都知道我们保存相册到Android手机的时候,然后去打开系统图库找不到我们想要的那张图片,那是因为我们插入的图片还没有更新的缘故,先讲解下插入系统图库的方法吧,很简单,一句代码就能实现 Med ...

  10. VB学习笔记

    stack segment stack 'stack' dw dup() ;此处输入堆栈段代码 stack ends data segment ;IBUF OBUF 看成是内存的地址,IBUF+1和I ...