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文件里面已经做了注释,基本只需要修改宽高就好 ...
随机推荐
- redis 操作记录
cd opt/redis-3.2.1/ cd src ./redis-cli get token:xxx del token:xxx set token:xxx
- 【Android - 进阶】之事件分发机制
参考资料: View事件分发:http://blog.csdn.net/pi9nc/article/details/9281829 ViewGroup事件分发:http://blog.csdn.net ...
- Hadoop权威指南(中文版,第2版)【分享】
下载地址 Hadoop权威指南(中文版,第2版) http://download.csdn.net/download/u011000529/5726789 (友情提示:请点击右下的 “联通下载” 或者 ...
- 有关UIImageView+AFNetworking 下载图片的线程问题
今天写了一个demo,从服务器获取图片,然后显示在cell上,大家都知道cell的重用机制,当往下拉的时候,上面的cell遮住了,下面的cell就会重用被遮住的cell, 贴代码: NSString ...
- IFrame 根据嵌入页面自动调节大小
很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用Ifram ...
- [GIF] GIF Loop Coder - Animating with Arrays
In this lesson, we discuss animating using arrays, and how different data types are interpolated whi ...
- 3 分钟学会调用 Apache Spark MLlib KMeans
Apache Spark MLlib是Apache Spark体系中重要的一块拼图:提供了机器学习的模块.只是,眼下对此网上介绍的文章不是非常多.拿KMeans来说,网上有些文章提供了一些演示样例程序 ...
- gallery左右滑动时图片淡入淡出
前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透 ...
- EL表达式中的“+-x/”四种运算符和条件,比较运算符等
<%@page import="cn.hncu.domain.User"%><%@ page language="java" import=& ...
- docker daemonize sshd service
# 第一个-d表示让容器在后台运行 # 末尾的-D表示启动ssh的daemon模式,不然容器启动后立刻就变为停止状态了 docker run -d NAME/VERSION /etc/init.d/s ...