<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>HTML+jQuery+css 选项卡切换更能</title>

<meta name="keywords" content="HTML+jQuery+css 选项卡切换更能<" />

<meta name="description" content="HTML+jQuery+css 选项卡切换更能<" />

<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;
        cursor:auto;
     }

    #tabbox{

        width:1000px; 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 tab="tab1">选项卡1</a></li>

           <li><a tab="tab2">选项卡2</a></li>

           <li><a tab="tab3">选项卡3</a></li>

           <li><a tab="tab4">选项卡4</a></li>

        </ul>

        <ul class="tab_conbox">

            <li id="tab1" class="tab_con">

               <p>AAAAA</P>

               <p>111111111111111111111111111111111111111111111111111111</p>

            </li>

            <li id="tab2" class="tab_con">

               <p>BBBBB</P>

               <p>辽宁抚顺新宾</p>

            </li>

            <li id="tab3" class="tab_con">

               <p>Hello world ！</P>

               <p>333333333333333333333333333333333333333333333333</p>

            </li>

            <li id="tab4" class="tab_con">

               <p>CCCCCCCC</P>

               <p>44444444444444444444444444444444444</p></li>

        </ul>

    </div>

</body>

</html>

使用jQuery+css实现选项卡切换功能的更多相关文章

  1. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  3. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  4. jq选项卡切换功能

    效果图: <!DOCTYPE html> <html lang="en"> <head> <style> *{margin:0;pa ...

  5. css实现3D切换功能

    Demo asdasdasd   <!DOCTYPE html> <html lang="en"> <head> <title>De ...

  6. AxureRP分页签 / Tab选项卡切换功能~

    最终结果图如下: 实现过程: 1.从元件库中拖一个动态面板,调整所需大小,接下来的步骤都通过双击动态面板来完成. 2.双击动态面板,弹出框“面板状态管理”,新建状态并命名.此处新建了TAB1.TAB2 ...

  7. 【jQuery03】简单的选项卡切换

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

  8. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. 摊铺机基本参数介绍(三一重工SSP220C-5)

    三一重工SSP220C-5稳定土摊铺机参数 SSP系列稳定土摊铺机SSP220C-5 动力强劲162kw 动力充分满足摊铺机各种工况下动力需求 高效任何工况,确保摊铺能力大于900t/h,行业内绝无仅 ...

  2. centos 源码安装php5.5

    系统环境: CentOS 6.5 / 7.0 x86_64 Fedora 20 x86_64下载 PHP 源码包 # wget http://cn2.php.net/distributions/php ...

  3. 织梦dedecms 自带采集的缩略图地址后面有“/”斜杠的解决方法

    本来想偷懒在网上找一些文档去解决织梦采集缩略图地址带“/”的问题的,可是找了找发现没有人写出解决方法,只好自己动手了. 过程很复杂,找了问题的原因也是找了半天,自己一点一点的测试.最后找到了问题所在. ...

  4. jQuery计时器插件

    /** * 定义一个jQuery计时插件,实现记录计时开始时间.结束时间,总共耗时的功能 * @param $ * * @author Ivan 2862099249@qq.com * @date 2 ...

  5. MapReduce-排序(全部排序、辅助排序)

    排序 排序是MapReduce的核心技术. 1.准备 示例:按照气温字段对天气数据集排序.由于气温字段是有符号的整数,所以不能将该字段视为Text对象并以字典顺序排序.反之,用顺序文件存储数据,其In ...

  6. MVC 绑定 下拉框数据

    HTML: <div class="form-group col-sm-12"> <div class="col-sm-4"> < ...

  7. html div + css 下划线

    这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框borde ...

  8. 可编辑的div模仿文本框缓存(使用AUTOCOMPLETE属性,off是不缓存，on是缓存(默认))

    用session实现的, 1.进当前页面就从session(a)中取( sessionStorage.getItem )(不管存在不存在,后续有合理的存储和删除); 2.离开当前页时删除这个sessi ...

  9. pandas通过字典生成dataframe

    1.将一个字典输入: 该字典必须满足:value是一个list类型的元素,且每一个key对应的value长度都相同: (以该字典的key为columns) >>> import pa ...

  10. spring boot: 组合注解与元注解

    package ch2.annotation; //target/elementType用来设定注解的使用范围 import java.lang.annotation.ElementType; imp ...