< !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>代码简洁的滑动门（tab）jquery插件|苍南县国富工艺品厂</title>
<meta name="keywords" content="jquery特效,JS代码,js特效代码大全,导航菜单代码,焦点幻灯片,企业网页设计欣赏" />
<meta name="description" content="为您提供-基于jquery特效，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。" />
<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 src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function() {
jQuery.jqtab = function(tabtit, tabcon) {
$(tabcon).hide();
$(tabtit + " li:first").addClass("thistab").show();
$(tabcon + ":first").show();

$(tabtit + " li").click(function() {
$(tabtit + " li").removeClass("thistab");
$(this).addClass("thistab");
$(tabcon).hide();
var activeTab = $(this).find("a").attr("tab");
$("#" + activeTab).fadeIn();
return false;
});

};
/*调用方法如下：*/
$.jqtab("#tabs", ".tab_con");

});</script>
</head>

<body>
<div id="tabbox">
<ul class="tabs" id="tabs">
<li>
<!--下面的“###”用自己的域名替换-->
<a href="http://###/js/nav/" tab="tab1">导航菜单</a></li>
<li>
<a href="http://###/js/slide/" tab="tab2">焦点幻灯片</a></li>
<li>
<a href="http://###/js/gg/" tab="tab3">广告代码</a></li>
<li>
<a href="http://###/js/texiao/" tab="tab4">网页特效</a></li>
</ul>
<ul class="tab_conbox">
<li id="tab1" class="tab_con">
<p>
<span>只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</p>
</li>
<li id="tab2" class="tab_con">
<p>
<span>只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</p>
</li>
<li id="tab3" class="tab_con">
<p>
<span>只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</p>
</li>
<li id="tab4" class="tab_con">
<p>
<span>只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</p>
</li>
</ul>
</div>
<p>代码简洁的滑动门（tab）jquery插件调用方法："#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID，.tab_con是要显示的的内容类名。只要注意这两个地方调用就不会错。一个页面可以多次使用。</p>

</body>

</html>

代码简洁的滑动门（tab）jquery插件的更多相关文章

  1. 活动倒计时代码（精确到毫秒）jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 制作一个简洁的jquery插件

    原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6ef ...

  3. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  4. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  5. jQuery插件面向对象开发

    为什么要有面向对象的思维,因为如果不这样,你可能需要一个方法的时候就去定义一个function,当需要另外一个方法的时候,再去随便定义一个function,同样,需要一个变量的时候,毫无规则地定义一些 ...

  6. jQuery插件实践之轮播练习（一）

    所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...

  7. 如何使用jQuery写一个jQuery插件

    jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...

  8. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  9. 轮播图插件 SuperSlide2.1滑动门jQuery插件

    http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件

随机推荐

  1. python汉诺塔问题的递归理解

    一.问题背景 汉诺塔问题是源于印度一个古老传说. 源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下 ...

  2. spring boot 拦截异常 统一处理

    spring boot 默认情况下会映射到 /error 进行异常处理,提示不友好,需要自定义异常处理,提供友好展示 1.自定义异常类(spring 对于 RuntimeException 异常才会进 ...

  3. python-day3集合、文件读写、函数

    @集合运算 s.union(t) s | t 返回一个新的 set 包含 s 和 t 中的每一个元素 s.intersection(t) s & t 返回一个新的 set 包含 s 和 t 中 ...

  4. 2. spring定时任务

    1.添加命名空间 <!-- 定时注解驱动 --> <task:annotation-driven /> <!-- 进行定时任务的类,将其定义为一个bean --> ...

  5. redis 模糊删除key

    redis-cli KEYS "pattern" | xargs redis-cli DEL Redis keys命令支持模式匹配,但是del命令不支持模式匹配,有时候需要根据一定 ...

  6. css 之过渡效果

    之前写css的效果,都是使用js 来完成的,但是写js比较耗费时间,有时候逻辑不对,还出不来效果,所以也比较烦:所以一些简单的效果,就使用css 来完成会比较好一些,不必耗费太多的精力: 但是写css ...

  7. 中兴iptv机顶盒破解教程图文:亲测中兴B760EV3、B860A、B860AV1.1完美安装应用！非ttl破解！[转]

    一直以为中兴的这几个盒子只能通过ttl来破解,不过现在再也不用这么麻烦了,有了这个工具,前后破解不超3分钟!理论上支持所有中兴的iptv机顶盒的破解! 亲测中兴B760EV3.B860A.B860AV ...

  8. IOS 微信返回按钮事件控制弹层关闭还是返回上一页

    在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回“<”按钮,就会跳转回上一页或退出网站,而为了避免这种不好的误 ...

  9. vue mock

    如果后端不肯来帮你 mock 数据的话,前端自己来 mock 也是很简单的.你可以使用mock server 或者使用 mockjs + rap 也是很方便的. 不久前出的 easy-mock也相当的 ...

  10. HTML基本入门完成

    四. (一)丶下拉框select元素:一般可以创建单选或多选菜单.<select>与<option>一般同时使用,select代表下拉框,option代表他的每一项. 1.基本 ...