<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门切换,jQuery层切换代码</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").each(function(i){
$(this).hover(function(){
$(this).addClass("bg").siblings().removeClass("bg");
$(".div:eq("+i+")").show().siblings(".div").hide();
})
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
ul li{ list-style:none; float:left; background-color:#999; cursor:pointer; width:100px; height:25px; line-height:25px; text-align:center;}
ul li.bg{ background-color:#9F0;}
.clr{ clear:both;}
.div{width:200px; height:60px; background:#666; line-height:60px; text-align:center;}
.none{ display:none}
</style>
</head>
<body>
<ul><li class="bg">账户信息</li><li>邮寄地址</li></ul>
<div class="clr"></div>
<div class="div">
第一个div内容
</div>
<div class="div none">
第二个div内容
</div>
</body>
</html>
分享到:
相关推荐
jQuery hover阿里妈妈网站首页水平滑动门切换代码 jQuery hover阿里妈妈网站首页水平滑动门切换代码 jQuery hover阿里妈妈网站首页水平滑动门切换代码 jQuery hover阿里妈妈网站首页水平滑动门切换代码
jQuery仿腾讯视频图片滑动门切换效果
实现效果: ... jquery图标导航控制滑动门上下滚动切换,点击或鼠标放在左侧的图片上,右侧的内容发生变化,一个很酷炫的滑动门上下滚动切换的效果,一般我们用于企业网站或者商城网站,php中文网推荐下载!
jQuery的11种表格切换效果代码下载(滑动门代码)
简洁jQuery滑动门插件 鼠标滑过切换演示.html
基于JQuery的一款滑动切换插件,就是大家熟悉的滑动门和选项卡,也称为Tab标签,不过本插件内含有多款标签,有的带有动画效果,带有注释,不熟悉网页的也可轻松上手。一些代码注释: * defaultIndex - 默认选中的...
一款jQuery滑动门选项卡上下滚动切换特效,鼠标悬停选项卡图标导航自动切换到相应内容,鼠标经过图片显示加号特效。
一个很好的jquery 滑动门效果,可以做导航,或者图片切换,很简单,很实用!
jQuery图片自动滑动门效果,网上看到的,觉得不错上传上来,供大家一起共同分享学习。
jQuery滑动门选项卡上下滚动切换特效
jQuery图片自动滑动门效果图片切换图片滑动幻灯片 所
<li class="cur"><b class="zhanl"><p><img />展览展示</p></b><span class="zhanl"><p>... 一款jQuery滑动门选项卡上下滚动切换特效,鼠标悬停选项卡图标导航自动切换到相应内容,鼠标经过图片显示加号特效。
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...滑动门切换,jQuery层切换代码</title> <script type=”text
jQuery MoveTab从字面意思就可看出,它是一款移动式的Tab滑动门菜单,TAB大家把它叫做标签导航,其实和滑动门大同小异,本特效运用jquery插件的动画生成技术,使TAB的主标签可在鼠标的操控下滚动切换,为你的页面...
简洁jQuery滑动门插件 鼠标滑过切换演示 但不支持多次调用 想要多次调用必须修改id,并在JS里添加调用语句
主要介绍了jQuery实现自动切换播放的经典滑动门效果,可实现tab自动定时切换的功能,涉及jQuery基于定时函数动态操作页面元素的相关技巧,需要的朋友可以参考下
SuperSlide2.1滑动门jQuery插件是一款包含网站上常用的“焦点图 幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等效果。
jQuery网页特效插件集:图片轮播、TAB、滑动门等,用此插件实现的焦点图还同时具备TAB的功能,里面有多个效果演示页,里面演示的特效都不同,有图片轮播切换,有TAB滑动门等效果,都是常用的网页特效素材。
本文实例讲述了Jquery滑动门/tab切换实现方法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...