< !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. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  2. highcharts的用法

    <script type="text/javascript" src="../js/highcharts.js"></script>&l ...

  3. 百度地图点聚合MarkerClusterer性能优化

    公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...

  4. 本地jar包添加至Maven仓库

    Maven命令将本地的jar包方放到maven仓库中 //自定义本地的jar包在pom文件的参数 <dependency> <groupId>com.eee</group ...

  5. MySQL 登陆

    #==========================登陆mysql ============================================ # 登陆用户名:-u,登陆IP: -h, ...

  6. LINUX系统日常使用命令

    一.开关机命令1.shutdown -h now   关闭系统2.init 0   关闭系统3.telinit 0  关闭系统4.shutdown -h hours:minutes      按预定时 ...

  7. NetworkStream介绍说明

    如果服务器和客户端之间基于TCP连接的,他们之间能够依靠一个稳定的字节流进行相互传输信息,这也是NetworkStream的最关键的作用,有了这个神奇的协议,NetWorkStream便能向其他流一样 ...

  8. tensorflow,model,object_detection,训练loss先下降后递增，到几百万，解决tensorflow,model,object,detection,loss,incease

    现象:训练loss一开始下降一部分,跌代到若干次(具体多少和你的learning rate大小有关,大就迭代小就发生,小就需要多几次迭代) 日志如下(下面的日志来源于网络,我自己的日志已经clear掉 ...

  9. Mongodb数据库学习

    数据库 MongoDB (芒果数据库) 数据存储阶段 文件管理阶段 (.txt .doc .xls)优点 : 数据可以长期保存 可以存储大量的数据 使用简单 缺点 : 数据一致性差 数据查找修改不方便 ...

  10. eclipse-jee-kepler 如何设置编译compiler为1.8

    最新下载了jdk1.8,想在eclipse里面用一下 jdk1.8的新特性 但是,貌似eclipse(eclipse-jee-kepler-SR2-win32-x86_64.zip)最高的编译级别为: ...