文档章节

简洁jQuery滑动门插件

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 1144
阅读 36
收藏 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

上一篇: miniJS-Tip
lgscofield

lgscofield

粉丝 24
博文 141
码字总数 63275
作品 0
南京
架构师
私信 提问
加载中

评论(0)

jQuery PlugIn - Switch Tab 滑动门插件

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

江苏-柏灵
2011/09/15
709
0
6 个效果震撼的 jQuery 图片播放器

很多时候,尤其是当我们需要展示或者宣传自己的产品时,我们都会用到图片轮播的特效,但是,选择什么样的图片播放器更实用、更美观、更大气呢?下面就给大家推荐几款简单实用却又美观大气的j...

tp_wire
2012/07/04
6.6K
10
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
1.9W
11
20 个 jQuery 分页插件和教程,附带实例

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

红薯
2012/04/04
1.5W
6

没有更多内容

加载失败,请刷新页面

加载更多

设计模式三大分类+六大基本原则

1. 三大分类 1.1 创建型模式 工厂方法模式 抽象工厂模式 单例模式 建造者模式 原型模式 1.2 结构型模式 适配器模式 装饰器模式 代理模式 外观模式 桥接模式 组合模式 享元模式 1.3 行为型模式...

steven-黄笑笑
38分钟前
18
0
多线程基础学习

线程和进程有区别? 进程=加载上下文+执行程序+保存上下文 进程属于资源分配的最小单位,线程属于执行任务的最小单位。 线程6种状态: 1、New 尚未启动的线程的线程状态。 2、Runnable 可运行...

javazyw
39分钟前
28
0
英文对“ Big O”符号的解释是什么? - What is a plain English explanation of “Big O” notation?

问题: 我希望尽可能少用正式的定义和简单的数学方法。 解决方案: 参考一: https://stackoom.com/question/22l0/英文对-Big-O-符号的解释是什么 参考二: https://oldbug.net/q/22l0/What...

javail
41分钟前
11
0
Spring Cloud升级之路 - Hoxton - 2.入口类注解修改与OpenFeign的改造

本系列示例与胶水代码地址: https://github.com/HashZhang/spring-cloud-scaffold 入口类注解修改 之前的项目,我们也许会用@SpringCloudApplication作为我们入口类的注解。这个注解包括: ...

zhxhash
51分钟前
28
0
怎么将流程图翻转90度?迅捷画图教你全选翻转小技巧!

怎么将流程图翻转90度?在绘制好流程图之后,会接收到各式各样的修改意见,例如将绘制好的流程图翻转90度这样的操作,很多人在执行这个操作的时候,会先选择流程图的单个部分,逐个进行翻转,...

开源312
56分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部