jquery tab mouseover 特效
<!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 特效的更多相关文章
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- jquery tab
jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
- 强大的自适应jQuery焦点图特效
jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...
- 给大家分享一个jQuery TAB插件演示
jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...
- 简单的jquery tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery tab 插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
随机推荐
- 8-13-Exercise
链接:夜间活动 昨天的比赛好郁闷.......倒不是因为题目......在快要比赛的时候突然所有的网站都进不去了.......改了半天的DNS & IP......比赛都比了1个多小时才进去. ...
- 正则匹配:Email 密码强度 身份证 手机号 日期 数字每4个字空一格等
正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升.下面是在前端开发中经常 ...
- POJ 1657 Distance on Chessboard 简单的计算问题
Distance on Chessboard Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 23096 Accepted ...
- eclipse 插件之Code Folding
功能: eclipse自带折叠包括方法, import, 注释等得折叠功能, code folding 插件对其增强. 1. 下载插件:( 也可以用link方式, 我的是link安装, jar包网上很 ...
- MS-SQLSERVER中的MSDTC不可用解决方法
今天在本地机直接在触发器里更新还有一台服务器数据时出现: MSDTC不可用 解决的方法: 在windows控制面版-->管理工具-->服务-->Distributed Tra ...
- @RenderBody()和@RenderSection()
强大的Razor引擎 一.Razor基础简介 Razor采用了cshtml后缀的文件名,截图如下: A. 版面布局 从图上看到,新的视图引擎已经没有了Site.Master这种MasterPage了, ...
- HashMap早知道
第一眼hashmap始终Collection那个地点 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGxmMTIzMzIx/font/5a6L5L2T/f ...
- python调用smtplib模块发送邮件
#!/usr/bin/env python #coding: utf-8 import smtplib from email.mime.text import MIMEText from email. ...
- Mac安装Mysql无法登录
Mac安装的Mysql5.7.10 执行mysql -u root -p 就要求输入密码,但是新安装是没密码的.然后就会报错. ERROR 1045 (28000): Access denied fo ...
- ffmpeg之yuv2rgb_c_24_rgb
YUV2RGBFUNC(yuv2rgb_c_24_rgb, uint8_t, ) LOADCHROMA(); PUTRGB24(dst_1, py_1, ); PUTRGB24(dst_2, py_2 ...