文档章节

简洁jQuery滑动门插件

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 1144
阅读 15
收藏 0
滑动门,就是传说中的多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>

本文转载自:http://lgscofield.iteye.com/blog/1634684

共有 人打赏支持
lgscofield

lgscofield

粉丝 21
博文 140
码字总数 63036
作品 0
南京
架构师
jQuery PlugIn - Switch Tab 滑动门插件

作者:山顶洞羊 jQuery 是继prototype之后又一个优秀的JavaScript框架.有多优秀? 这个就不介绍了, 搜索去吧! jQuery 的 UI 插件也不错. 但用了下, 没有想像中的好用. 于是, 很久以前就一直想...

江苏-柏灵
2011/09/15
0
0
20篇教你得到酷炫效果的JQuery教程

我们都喜爱jquery带来的梦幻效果。本之列举的教程标题不同,但它们都带有不同的酷炫视觉效果。跟着它们逐步重建你的设计,又或是将这些令人震憾的特效融入你的设计中。 Making a Beautiful H...

晨曦之光
2012/03/09
0
0
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
jQuery教程:教你打造20个超级酷的视觉效果

我们都爱jQuery,因为基于它我们可以做出各种奇特的效果。下面这些特效教程都基于不同的主题,它们都包括一些很酷的视觉效果。按照下列步骤来进行重新设计,或按照这些使用的步骤用到你自己的...

ch2004
2012/04/03
0
0
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
0
1

没有更多内容

加载失败,请刷新页面

加载更多

kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
2
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
2
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
14
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部