图片：

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

/*         上边tab */

html {

    font-size: 14px

}

body {

    margin: 0;

    padding: 0;

    font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial,

        "Helvetica Neue", Helvetica;

    color: #333;

    word-wrap: break-word;

    -webkit-font-smoothing: antialiased;

    background: #FFF;

}

ul {

    margin: 0;

    padding: 0

}

li {

    list-style: none

}

.aui-nav-list-box {

    overflow: hidden;

    zoom: 1;

    border-bottom: none;

    z-index: 110;

    background: #F0F0F0;

    width: 100%;

    display: block;

    border-top: solid 1px #d1d1d1;

    border-left: solid 1px #d1d1d1;

}

.aui-nav-list-box ul li a {

    color: #000;

}

.aui-nav-list-box ul li {

    float: left;

    color: #000;

    height: 45px;

    cursor: pointer;

    line-height: 45px;

    width: 80px;

    text-align: center;

    font-size: 14px;

}

.aui-nav-list-box ul .aui-current {

    background: white;

    font-weight: bold;

}

.aui-nav-list-item {

    display: none;

    background: #FFF;

}

/*         左边tab */

* {

    margin: 0;

    padding: 0;

}

ul {

    list-style: none;

}

.tab {

    width: 100%;

    background: #F0F0F0;

}

.tab .box {

    width: 100%;

    position: relative;

    margin: 0 auto;

    height: auto;

}

.tab .box .menus {

    width: 80px;

    height: auto;

    background: white;

    float: left;

    overflow: hidden;

    border-right: solid 1px #d1d1d1;

    border-bottom: solid 1px #d1d1d1;

}

.tab .box .menus li {

    cursor: pointer;

    width: 80px;

    height: 35px;

    background: #F0F0F0;

    font-size: 14px;

    text-align: center;

    line-height: 35px;

    transition: all 0.3s;

    -moz-transition: all 0.3s;

    -o-transition: all 0.3s;

    -webkit-transition: all 0.3s;

}

.tab .box .menus li:nth-child(7) {

    border-bottom: none;

}

.tab .box .bg {

    background: white !important;

}

.tab .right {

    float: left;

    width: 93%;

    height: 800px;

    overflow: hidden;

    background: white;

}

.tab .tab_right {

    width: 100%;

    height: 800px;

    text-align: center;

    position: relative;

}

.tab .scroll {

    transition: all 0.5s;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    -webkit-transition: all 0.5s;

}

</style>

</head>

<body>

    <div class="aui-nav-content-box">

        <div class="aui-nav-list-box">

            <ul>

                <li class="aui-current">aaa</li>

                <li>bbb</li>

                <li>ccc</li>

                <li>ddd</li>

                <li>eee</li>

                <li>fff</li>

            </ul>

        </div>

        <div class="aui-nav-list-tab">

            <div class="aui-nav-list-item" style="display: block">aaa</div>

            <div class="aui-nav-list-item">

                <div>

                    <div class="tab" style="margin-top: 10px;">

                        <div class="box">

                            <ul class="menus">

                                <li class="bg">tab1</li>

                                <li>tab2</li>

                                <li>tab3</li>

                                <li>tab4</li>

                                <li>tab5</li>

                                <li>tab6</li>

                                <li>tab7</li>

                            </ul>

                            <div class="right">

                                <div class="scroll">

                                    <div class="tab_right">111</div>

                                    <div class="tab_right">222</div>

                                    <div class="tab_right">333</div>

                                    <div class="tab_right">444</div>

                                    <div class="tab_right">555</div>

                                    <div class="tab_right">666</div>

                                    <div class="tab_right">777</div>

                                </div>

                            </div>

                        </div>

                        <div class="clear"></div>

                    </div>

                </div>

            </div>

            <div class="aui-nav-list-item">ccc</div>

            <div class="aui-nav-list-item">ddd</div>

            <div class="aui-nav-list-item">eee</div>

            <div class="aui-nav-list-item">fff</div>

        </div>

    </div>

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <script type="text/javascript">

 // 上面tab切换

    $('.aui-nav-list-box ul li').click(

            function() {

                $(this).addClass('aui-current').siblings().removeClass(

                        'aui-current');

                $('.aui-nav-list-tab>div:eq(' + $(this).index() + ')').show()

                        .siblings().hide();

            })

    // 左边tab切换

    $('.tab .menus li').each(function() {

        $('.tab .menus li').click(function() {

            $('.tab .menus li').removeClass('bg');

            $(this).addClass('bg');

            var index = $(this).index();

            $('.tab .scroll').css('margin-top', -index * 800 + 'px');

        })

    })

 </script>

</body>

</html>

tab页的更多相关文章

  1. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  2. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  3. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

  4. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  5. 自制tab页

    没事自己弄着玩,写了个tab页.不要当真.想看就看看.希望相互学习. 效果预览:html源码: <!DOCTYPE html> <html lang="en"&g ...

  6. Android下实现tab页个人比较推崇的方法

    使用fragment实现tab页的效果: 三个页面是单独的三个Fragment 主Activity的实现: package com.hsx.tab; import android.os.Bundle; ...

  7. 多tab页框架的使用场合

    多tab页框架适合应用于功能较少的场合,例如邮箱后台之类的. 对于一些业务功能多且复杂的场合就不适用.打开过多的tab页容易给用户造成混乱,页面的跳转也存在一定的难度. 一种新技术不能完全取代旧技术, ...

  8. Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页

    tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...

  9. ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  10. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

随机推荐

  1. oracle-data-mining

    create user datamine identified by 123456 QUOTA UNLIMITED ON users; 然后在sqldeveloper工具界面-data miner中, ...

  2. 定时重启tomcat

    写个简单的定时重启,弄了一上午,主要是crontab里面奇怪 #!/bin/bash p=`ps -ef |grep tomcat |head -n 1|awk -F" " '{p ...

  3. 简单的shell脚本练习（一）

    1:求1000一内的偶数和 方法一: #!/bin/bash #用累加实现1000以内的偶数和 sum= ;i<=;i=i+)) do sum=$(($sum+$i)); done echo $ ...

  4. zabbix与tomcat（六）

    一.zabbix监控远程tomcat的流程   Zabbix-server 找 zabbix Java Gateway获取Java数据 zabbix Java Gateway 找Java程序(zabb ...

  5. 用jquery得到select选中的值

    <select class="pushtype" name="push_type" onchange="pushType(this)" ...

  6. linux tomcat jvm调优

    修改TOMCAT_HOME/bin/catalina.sh文件: # OS specific support.  $var _must_ be set to either true or false. ...

  7. c# 动态绘制直线和曲线

    c# 动态绘制直线和曲线   在本案例中利用Graphics对象动态地绘制直线和曲线.程序运行后,选择“直线”单选按钮,然后按下鼠标左键拖动鼠标就可以绘制直线,选择“曲线”单选按钮,然后移动鼠标就可以 ...

  8. 黄聪：iOS $299刀企业证书申请的过程以及细节补充

    最近申请了iOS的 299刀企业证书,相关过程有些问题,分享出来,以便后来人参考.申请的过程我主要参考了别人以前的文章,链接如下: 1.https://developer.apple.com/cn/s ...

  9. Faster R-CNN代码例子

    主要参考文章:1,从编程实现角度学习Faster R-CNN(附极简实现) 经常是做到一半发现收敛情况不理想,然后又回去看看这篇文章的细节. 另外两篇: 2,Faster R-CNN学习总结      ...

  10. iOS上传本地代码到git

    1.顾名思义,首先你得注册一个github账户 这个我就不细说了. 2.然后你得创建一个 repository  步骤见下图 3.相当于创建成功 会跳到下图界面 4.一看就很清楚了 create a ...