< !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. Anatomy of a Database System学习笔记 - 事务：并发控制与恢复

    这一章看起来是讲存储引擎的.作者抱怨数据库被黑为“monolithic”.不可拆分为可复用的组件:但是实际上除了事务存储引擎管理模块,其他模块入解析器.重写引擎.优化器.执行器.访问方式都是代码相对独 ...

  2. 纠结了一下午的问题：运行opencv的HoughLinesP函数出错

    问题描述:检测出的直线数量显然不对,非常巨大.程序运行崩溃. 解决办法:在添加附加依赖项时,Dubug模式只添加opencv_world310d.lib,Release模式下只添加opencv_wor ...

  3. notepad++之删除空行

    正则表达式替换 查找目标: \r\n{0,1}[\s\t]*\r\n 替换为: \r\n 循环查找:勾选

  4. [转]MTK6252 11B添加模块、task实例

    原网址    http://blog.sina.com.cn/s/blog_6b2328a201014l26.html ###############模块的添加################## 1 ...

  5. nltk-贝叶斯分类器

    本人小白一枚,专业统计,之前做过质量工程,现转行将近一年,开始记录我的学习过程及踩过的坑. 第一篇:用贝叶斯分类器(本文使用NLTK中的NaiveBayesClassifier)将5000多个样本进行 ...

  6. ESLint具体规则设置

    "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 & ...

  7. css background-image 自适应宽高——转载

    就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../im ...

  8. 小白安装openvas总结-原创20181213

    先对该工具进行熟悉: OpenVAS 介绍 1.关于OpenVAS OpenVAS(Open Vulnerability Assessment System)是一套开源的漏洞扫描系统,早期Nessus ...

  9. wkhtmltopdf 转pdf时元素被页面切割开

    1. <style> * { page-break-inside: avoid; page-break-after: avoid; page-break-before: avoid; } ...

  10. 大数据入门到精通18--sqoop 导入关系库到hdfs中和hive表中

    一,选择数据库,这里使用标准mysql sakila数据库 mysql -u root -D sakila -p 二.首先尝试把表中的数据导入到hdfs文件中,这样后续就可以使用spark来dataf ...