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. Why The Golden Age Of Machine Learning is Just Beginning

    Why The Golden Age Of Machine Learning is Just Beginning Even though the buzz around neural networks ...

  2. hdu 5747 Aaronson

    T :  1 n m:  10  2 题解:20 * 0  +  21* 1  +  22* 2 = 10 输出:3  <--  0+1+2=3 AC 代码: #include<stdio ...

  3. 大理石在哪？（Where is the Marble？，UVa 10474）

    参考:ACM紫书 第五章 P108 [排序与检索] 下面的代码中有些 提示性输出,想Ac 需删除提示性输出语句,读者自行修改. #include <cstdio> #include < ...

  4. 斯坦福大学CS224d基础1：线性代数回顾

    转自 http://blog.csdn.net/han_xiaoyang/article/details/51629242 斯坦福大学CS224d基础1:线性代数知识 作者:Zico Kolter ( ...

  5. 拆分Spring配置文件

    把一个applicationContext.xml拆分(还可以再分出action部分和tx事务部分) 1.dao部分 <!-- 配置DAO --> <bean id="em ...

  6. WPF 窗口自定义拉伸

    .NET技术交流群 199281001 .欢迎加入. //自定义窗体拉伸 public HwndSource _HwndkaifaSource; private const int WM_SYSCOM ...

  7. Visual Studio 2013 中 mysql 使用 EF6

    1.web.config <configSections> <!-- For more information on Entity Framework configuration, ...

  8. Hadoop源码之Configuration

    本文hadoop版本为最新版本2.6.Configuration做为Hadoop的一个基础功能承担着重要的责任,为Yarn.HSFS.MapReduce.NFS.调度器等提供参数的配置.配置文件的分布 ...

  9. Flume-NG(1.5版本)中SpillableMemoryChannel源码级分析

    SpillableMemoryChannel是1.5版本新增的一个channel.这个channel优先将evnet放在内存中,一旦内存达到设定的容量就使用file channel写入磁盘.然后读的时 ...

  10. TASKKILL命令使用大全

    Mr.Savin Mr.Savin 2009-08-07 183315TASKKILL [S system [U username [P [password］］ { [FI filter] [PID ...