jquery 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>代码简洁的滑动门（tab）jquery插件 - 懒人建站</title>

    <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(tabs,tabcon) {

                $(tabcon).hide();

                $(tabs + " li:first").addClass("thistab").show();

                $(tabcon + ":first").show();

                $(tabs + " li").mouseover(function () {

                    $(tabs + " li").removeClass("thistab");

                    $(this).addClass("thistab");

                    $(tabcon).hide();

                    var activeTab = $(this).find("a").attr("tab");

                    $("#" + activeTab).show();

                    return false;

                });

            };

            /*调用方法如下：*/

            $.jqtab("#tabs",".tab_con");

        });

    </script>

</head>

<body>

<div id="tabbox">

    <ul class="tabs" id="tabs">

        <li><a  tab="tab1">我的学习</a></li>

        <li><a  tab="tab2">我的班级</a></li>

    </ul>

    <ul class="tab_conbox">

        <li id="tab1" class="tab_con"><p>123</p></li>

        <li id="tab2" class="tab_con"><p>456<br />789</p></li>

    </ul>

</div>

<p>（tab）jquery插件调用方法："#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID，.tab_con是要显示的的内容类名。一个页面可以多次使用。

</p>

</body>

</html>

jquery tab的更多相关文章

  1. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  2. 简单的jquery tab

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery tab 插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

  5. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  6. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  7. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  8. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  9. jquery tab键转换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. --hdu 1231 最大连续子序列(动态规划)

    AC code: #include<stdio.h> int a[100005]; int main(void) { int n,i; int sum,maxn,tem,s,e,flag; ...

  2. hdu 1008 Elevator

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Description The hig ...

  3. memcached 缓存服务器

    Memcached 缓存服务器 Memcached 是高性能的分布式内存缓存服务器. 一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态web应用的速度.提高可扩展性. 主要特点 ...

  4. PHP5.3中关于VC9和VC6以及Thread Safe和Non Thread Safe版本选择的问题

    转自:http://www.htmer.com/article/716.htm 最近在PHP官网上看到又有新版的PHP下载了,于是上去找找For Windows的版本,可是一看确傻眼了,一共给了四个版 ...

  5. IE8 松散耦合进程框架（Loosely-Coupled IE (LCIE)--特性介绍

    官方介绍:http://blogs.msdn.com/b/ie/archive/2008/03/11/ie8-and-loosely-coupled-ie-lcie.aspx 参考文档:http:// ...

  6. acdream.A Very Easy Triangle Counting Game(数学推导）

    A - A Very Easy Triangle Counting Game Time Limit:1000MS     Memory Limit:64000KB     64bit IO Forma ...

  7. PHP的SQL注入攻击的技术实现以及预防措施

    最近在折腾 PHP + MYSQL 的编程.了解了一些 PHP SQL 注入攻击的知识,总结一下经验.在我看来,引发 SQL 注入攻击的主要原因,是因为以下两点原因: 1. php 配置文件 php. ...

  8. 5 个最受人喜爱的开源 Django 包

    导读 Django 围绕“可重用应用”的思想建立:自包含的包提供了可重复使用的特性.你可以将这些可重用应用组装起来,在加上适用于你的网站的特定代码,来搭建你自己的网站.Django 具有一个丰富多样的 ...

  9. [转载]WiFi有死角? 巧用旧无线路由器扩展覆盖

    怎么了,家里的WiFi有死角?老旧无线路由器的无线覆盖不给力?现在大功率无线产品或双频无线产品的售价并不便宜,而且仅靠一台无线路由器并不能满足多户型家庭的无线覆盖需求.那么,是不是有什么廉价而又实用的 ...

  10. C++ Set

    set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...