<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

    <style type="text/css">

        div,ul,li,a {

    margin:0;

    padding:0;

}

ul,li {

    list-style:none;

}

body {

    font-size:14px;

    background-color:#f7f7f7;

}

a {

    color:#666;

    text-decoration:none;

}

a:hover {

    color:#F60;

}

#title li {

    float:left;

    //margin-right:20px;

    padding:5px;

    border:1px solid #dedede;

    background:#FFF;

    //width:50px;

    text-align:center;

    height:28px;

    line-height:28px;

    position:relative;

    z-index:1000;

}

#title,#wrap {

    clear:both;

    background-color:#FFF;

    width:300px;

}

#wrap {

    border:1px solid #dedede;

    height:300px;

    position:relative;

    top:-1px;

    padding:10px;

}

#wrap>div {

    display:none;

    height:100%;

    overflow:auto;

}

#wrap .active {

    display:block;

}

#title .ho {

    border-bottom:1px solid #FFF;

    background:red;

}

#title .ho a {

    color:white;

}

    </style>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <script type='text/javascript'>

        $(function() {

        function tab(pa) {

        $(pa + ".title li").click(function() {

            //找到是点击第几个

            var ind = $(pa + "#title li").index($(this));

            //alert(ind);

            //以前显示的隐藏

            $(pa + ".wrap div:visible").hide();

            //第几个显示

            $(pa + ".wrap div:eq(" + ind + ")").show();

            //有高亮ho 去掉高亮ho

            $(pa + ".title li.ho").removeClass("ho");

            //被点击的元素添加ho

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

        }) //clicked

    } //tab ed

    tab(".tab1 ");

    $("#btnOK").click(function(){alert('ok')});

    $("#btnCancel").click(function(){alert('cancel')});

})

    </script>

</head>

<body>

    <div class="tab1" style="margin:100px;">

        <ul id="title" class="title">

            <li class="ho"><a href="javascript:void(0)">话费ggggg</a></li>

            <li><a href="javascript:void(0)">游戏</a></li>

            <li><a href="javascript:void(0)">旅行xxxx</a></li>

            <li><a href="javascript:void(0)">保险</a></li>

        </ul>

        <div id="wrap" class="wrap">

            <div class="active"> this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1

            </div>

            <div> this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>

            </div>

            <div> this is con3</div>

            <div>this is con4</div>

        </div>

    </div>

    <div style="height:400px;width:400px;margin:100px;background-color:#FFF;">

        <ul id="myTab" class="nav nav-tabs">

            <li class="active">

                <a href="#home" data-toggle="tab">

                     菜鸟教程

                </a>

            </li>

            <li><a href="#ios" data-toggle="tab">iOS</a></li>

            <li><a href="#jmeter" data-toggle="tab">jmeter</a></li>

            <li><a href="#ejb" data-toggle="tab">ejb</a></li>

        </ul>

        <div id="myTabContent" class="tab-content">

            <div class="tab-pane fade in active" id="home" style="padding:5;">

                <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>

            </div>

            <div class="tab-pane fade" id="ios">

                <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

                    TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

            </div>

            <div class="tab-pane fade" id="jmeter">

                <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

            </div>

            <div class="tab-pane fade" id="ejb">

                <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

                </p>

            </div>

        </div>

    </div>

</body>

</html>

页面的Tab选项卡 简单实例的更多相关文章

  1. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  2. 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题

    解决方法,不能直接写点击效果就要在超链接中加一个参数,根据参数的值去给变焦点的效果,实现方法如下: <div class="vip_search">           ...

  3. jquery翻页turnjs简单实例

    jquery翻页turnjs简单实例<pre><div id="flipbook"> <div class="hard" styl ...

  4. 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 ...

  5. tab选项卡实例

    之前也见了不少的tab选项卡,但是下面这个选项卡是一个页面中有多个时互不影响的. <head> <meta charset="utf-8"> <met ...

  6. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  7. CSS学习笔记（7）--html页面的CSS、DIV命名规则

    html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...

  8. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  9. Android Fragment 简单实例

    Android上的界面展示都是通过Activity实现的.Activity实在是太经常使用了.我相信大家都已经很熟悉了,这里就不再赘述. 可是Activity也有它的局限性,相同的界面在手机上显示可能 ...

随机推荐

  1. Count the Colors 线段树

    题目 参考博客地址 题意: n范围[1,8000] ,  li 和 ri 的范围[0,8000].  n个操作,每个操作是把 [li , ri]内的点修改成一个颜色c. n个操作过后,按颜色从小到大 ...

  2. test20190729 夏令营NOIP训练14

    40+100+0=140. 基因光线 黑大帅统治古古怪界后,一直在玩一种很奇葩的游戏.在一个二维平面上,他先复制了n个小A,把他们放在不同的位置,然后射出一条ax+by+c=0的基因光线,宽度为d,即 ...

  3. 适合于做项目与团队管理的工具（Choerodon）

    官网链接:http://choerodon.io/zh/ 此处不做太多的介绍,需要了解的朋友进入官网进行查看. Choerodon猪齿鱼开源多云技术平台,是基于开源技术Kubernetes,Istio ...

  4. 团队协作editconfig与eslint

    editconfig root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf ins ...

  5. python - alipay sdk 使用 及 注意点

    一. 在 点击跳转 这里拿到自己的 appid  和  支付宝公钥 ,    如果想要得到 支付宝的公钥 就需要获取 应用的公钥,具体获取方式 : 获取应用公钥和私钥 a. 应用私钥和支付宝公钥 获取 ...

  6. Newtonsoft.Json 自定义序列化器---时间

    IsoDateTimeConverter _IsoDateTimeConverter = new IsoDateTimeConverter() { DateTimeFormat = "yyy ...

  7. DBA 有哪些工作

    首先,我们看看DBA的工作有哪些?DBA的工作实际上都是围绕数据库展开,包含但不限于这些工作: 1. 数据库.主机.操作系统.交换机.存储选型,预算,架构设计,部署,参数优化: 2. 数据库备份.恢复 ...

  8. SVN “Previous operation has not finished”

    https://jingyan.baidu.com/article/cbcede0761334902f40b4d31.html 需要运行sqlite3打开.svn下的wc.db数据库文件, sqlit ...

  9. 洛谷 P1230 智力大冲浪 题解

    P1230 智力大冲浪 题目描述 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每个参赛者 \(m\)元.先不要太高兴!因为这些钱还不一定都是你的 ...

  10. 题解 UVA11105 【H-半素数 Semi-prime H-numbers】

    做这道题之前首先要掌握的是线性筛的模板 附上题目链接 https://www.luogu.org/problem/P3383 首先这道题目的范围有些特殊必须是% 4 == 1的数才行 所以可以这样 直 ...