滑动门,就是传说中的多tab显示
<!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=gb2312" />
<title>简洁jQuery滑动门插件 - 懒人建站</title>
<meta name="keywords" content="jquery特效,JS代码,js特效代码大全,导航菜单代码,焦点幻灯片,企业网页设计欣赏" />
<meta name="description" content="懒人建站为您提供-基于jquery特效,jquery弹出层效果,js特效代码大全,JS广告代码,导航菜单代码,下拉菜单代码和jquery焦点图片代码。" />
[url]http://dl.iteye.com/upload/attachment/0072/4389/a0fb8e9d-4279-324d-a3a4-8716c7c48e12.jpg[/url]
<style type="text/css">
body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}
a{text-decoration: none;color: #000;font-size: 14px;}
#tabbox{ width:600px; overflow:hidden; margin:0 auto;}
.tab_conbox{border: 1px solid #999;border-top: none;}
.tab_con{ display:none;}
.tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
.tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
.tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
.tabs li a:hover {background: #ccc;}
.tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}
.tab_con {padding:12px;font-size: 14px; line-height:175%;}
</style>
<script type="text/javascript" src="./jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
$(tab_conbox).find("li").hide();
$(tabtit).find("li:first").addClass("thistab").show();
$(tab_conbox).find("li:first").show();
$(tabtit).find("li").bind(shijian,function(){
$(this).addClass("thistab").siblings("li").removeClass("thistab");
var activeindex = $(tabtit).find("li").index(this);
$(tab_conbox).children().eq(activeindex).show().siblings().hide();
return false;
});
};
/*调用方法如下:*/
$.jqtab("#tabs","#tab_conbox","click");
$.jqtab("#tabs2","#tab_conbox2","mouseenter");
});
</script>
</head>
<body>
<div id="tabbox">
<h1>简洁jQuery滑动门插件 单击切换演示</h1>
<ul class="tabs" id="tabs">
<li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><a href="http://www.51xuediannao.com/js/gg/">广告代码</a></li>
<li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
</ul>
<ul class="tab_conbox" id="tab_conbox">
<li class="tab_con">
<p>1<span><a href="http://www.51xuediannao.com/">懒人建站</a>只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
<li class="tab_con">
<p>2<span><a href="http://www.51xuediannao.com/">懒人建站</a>2只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
<li class="tab_con">
<p>3<span><a href="http://www.51xuediannao.com/">懒人建站</a>3只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
<li class="tab_con">
<p>4<span><a href="http://www.51xuediannao.com/">懒人建站</a>4只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
</ul>
<h1>简洁jQuery滑动门插件 鼠标滑过切换演示</h1>
<ul class="tabs" id="tabs2">
<li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><a href="http://www.51xuediannao.com/js/gg/">广告代码</a></li>
<li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
</ul>
<ul class="tab_conbox" id="tab_conbox2">
<li class="tab_con">
<p>1<span><a href="http://www.51xuediannao.com/">懒人建站</a>只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
<li class="tab_con">
<p>2<span><a href="http://www.51xuediannao.com/">懒人建站</a>2只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
<li class="tab_con">
<p>3<span><a href="http://www.51xuediannao.com/">懒人建站</a>3只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
<li class="tab_con">
<p>4<span><a href="http://www.51xuediannao.com/">懒人建站</a>4只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p>
</li>
</ul>
</div>
</body>
</html>
- 大小: 67.3 KB
分享到:
相关推荐
简洁jQuery滑动门插件 鼠标滑过切换演示.html
简洁jQuery滑动门插件 鼠标滑过切换演示 但不支持多次调用 想要多次调用必须修改id,并在JS里添加调用语句
jquery SuperSlide滑动门组合插件大全 jquery SuperSlide滑动门组合插件大全
一个很好的jquery 滑动门效果,可以做导航,或者图片切换,很简单,很实用!
滑动验证插件-------------------------------------------------------------------------------------------------------------------------------------------------------------------
jquery.SuperSlide超级滑动门插件多种实用的滑动门... jquery.SuperSlide超级滑动门插件多种实用的滑动门... jquery.SuperSlide超级滑动门插件多种实用的滑动门...
jQuery滑动解锁插件是一款用户需要滑动指定的滑块到指定位置,才能通过验证。unlock.js可以实现这种滑动解锁功能。
没事在网上找的一个很棒的JQuery滑动门特效!
jquery滑动门控
jquery滑动门控制
这是一款非常实用的jQuery滑动按钮插件。该滑动按钮插件可以将input元素转换为滑动按钮样式。插件中使用javascript来控制滑动按钮的滑动,样式使用纯CSS来制作。
之前我们也已经分享过一些不错的jQuery滑动杆插件,比如jQuery/CSS3带Tooltip的滑杆动画以及CSS3 jQuery UI控制滑杆插件,这些效果都挺酷的。今天要分享的也是一款jQuery滑动杆插件,我们可以利用这款插件实现网页...
jquery滑动门效果,代码简单,容易修改
jquery最新的插件 slidershow
带左右控制按钮的jquery选项卡滑动门特效插件 带左右控制按钮的jquery选项卡滑动门特效插件
一款jQuery滑动门选项卡上下滚动切换特效,鼠标悬停选项卡图标导航自动切换到相应内容,鼠标经过图片显示加号特效。
unlock.js是一款jQuery滑动解锁插件。目前很多网站在用户登录和注册时,为防止恶意攻击,采用来滑动解锁的验证方式。用户需要滑动指定的滑块到指定位置,才能通过验证。unlock.js可以实现这种滑动解锁功能。
基于JQuery的一款滑动切换插件,就是大家熟悉的滑动门和选项卡,也称为Tab标签,不过本插件内含有多款标签,有的带有动画效果,带有注释,不熟悉网页的也可轻松上手。一些代码注释: * defaultIndex - 默认选中的...
jQuery滑动门选项卡上下滚动切换特效