< !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. Teradata简介

    Teradata是受欢迎的关系数据库管理系统之一. 它主要适用于构建大规模数据仓库应用程序.Teradata通过并行性的概念实现了这一点. 它是由Teradata公司开发的. 无限并行化-  Tera ...

  2. pyqt5-数据库加载错误解决

    1.无法连接postgresql 直接在pycharm上安装pyqt5没有QT这个文件夹, 在ancanda中装好使用. 切换加载环境,或者将第二个ptqt5拷贝替换第一个环境中的pyqt5

  3. redis的使用与 django的redis的使用

    1. 使用redis数据库分为两种: 第一种是在python语言中直接使用的方式, 第二种就是在django中使用django_redis模块来数用 第一种直接在python语言中使用redis im ...

  4. [转载]EF或LINQ 查询时使用IN并且根据列表自定义排序方法

    原文地址:EF或LINQ 查询时使用IN并且根据列表自定义排序方法作者:李明川 EF和LINQ改变了原有的手写SQL时期的一些编码方法,并且增强了各数据库之间的移植性简化了开发时的代码量和难度,由于很 ...

  5. Django中的auth模块

    from django.contrib import auth authenticate() 提供了用户认证功能,即验证用户名以及密码是否正确,一般需要username .password两个关键字参 ...

  6. usb设备（移动硬盘或U盘），弹出时提示“有进程或程序占用，无法弹出”。解决办法

    测试环境:Win7(其他Windows系统环境,也可参考) 总结办法来源,https://bbs.csdn.net/topics/392297251?page=1文章中热心网友的评论指引 1. 控制面 ...

  7. 云笔记项目-Spring事务学习-传播NESTED

    接下来测试事务传播属性NESTED Service层 Service层方法事务传播属性都设置为NESTED. LayerT层代码 package LayerT; import javax.annota ...

  8. map基本方法

    添加功能: V put(K key, V value)  添加和修改 ,添加时返回null,修改时返回被修改的值   Map<String,String> map = new HashMa ...

  9. Selenium Extent Report的设置

    Extent Report需要在线加载css,不然生成的html report会很难看. 但可以设置不在线加载css,而是使用本地css,在使用htmlreporter加上这句 htmlReporte ...

  10. wayne生产环境部署（360的容器发布平台-开源）

    参考文档 http://360yun.org/wayne/dev/develop-flow.html 使用rke部署k8s,详细过程见前面 文章,同时部署好kubectl 安装go yum insta ...