tab页

图片：

代码：

<!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页的更多相关文章

JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
使用CSS和jQuery实现tab页
使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
jquery实现tab页切换显示div
1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
自制tab页
没事自己弄着玩,写了个tab页.不要当真.想看就看看.希望相互学习. 效果预览:html源码: <!DOCTYPE html> <html lang="en"&g ...
Android下实现tab页个人比较推崇的方法
使用fragment实现tab页的效果: 三个页面是单独的三个Fragment 主Activity的实现: package com.hsx.tab; import android.os.Bundle; ...
多tab页框架的使用场合
多tab页框架适合应用于功能较少的场合,例如邮箱后台之类的. 对于一些业务功能多且复杂的场合就不适用.打开过多的tab页容易给用户造成混乱,页面的跳转也存在一定的难度. 一种新技术不能完全取代旧技术, ...
Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页
tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...
ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品
例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始: 1. 打开调试开关文件地址:include/cls_template.php 找到 : functi ...
使用原生js与jQuery分别实现一个简单的tab页签
tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

随机推荐

too many open files(打开的文件过多)解决方法
https://blog.csdn.net/roy_70/article/details/78423880 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.n ...
robot framework下载文件操作
不同的浏览器点击[下载]按钮之后,需要点击保存,还是确定,或者直接默认直接下载都是不一样的 1.chrome:点击[下载]之后,会自动执行下载操作,直到下载结束 A)点击下载,等待下载结束(sleep ...
关于PostmanURL中不能传递中文的问题
众所周知,中文乱码等问题在开发过程中让人厌烦,本人最近在使用Postman插件测试web的时候,在请求中添加了中文,结果请求错误截图如下: 原因:不能直接处理中文,需要自行转化解决: 1.新建一个 ...
SQL Server 幻读的真实案例
数据库中有表[01_SubjectiveScoreInfo],要实现表中的数据只被查出一次,此表数据量较大,有三四百万数据.表结构也确实不是很合理,无法修改表结构,即使是新增一个字段也会有相当大的修改 ...
python_字符编码&格式化
电脑最小储存单位是bit(位),8bit为一个Byte(字节), 8bit=1Byte 1024Byte=1KB 1024KB=1MB 1024MB=1GB 1024GB=1TB 编码的故事: 计算机 ...
MySQL 和 Oracle 在 MyBatis 使用中的区别
MySQL 和 Oracle 在 MyBatis 使用中的区别: 区别 MySQL Oracle 存储过程的参数模式 mode 为 IN 时,是否需要指定 jdbcType 不需要:MyBatis 为 ...
java volatile
volatile可以保证变量的可见性当一个变量定义为volatile后,此变量对所有的线程具有可见性.这里的可见性是指当一个线程修改了这个变量的值,新值对于其他线程来说是可以立即得知的. 每次使用v ...
【剑指offer】广度优先遍历二叉树
问题:从上往下打印出二叉树的每个节点,同层节点从左至右打印. *思路:先用队列存放树的根结点.每次出队一个结点,将结点非空的左右孩子分别入队.重复此过程,直到队列为空. import java.uti ...
Java中产生随机数的两个方法
Java中产生随机数的两个方法一.利用random方法来生成Java随机数. 在Java语言中生成Java随机数相对来说比较简单,因为有一个现成的方法可以使用.在Math类中,Java语言提供了一个 ...
将打印（printk/printf）及时写入文件的方法
问题是这样的,在测试一个gps的app的时候,我使用脚本 “ gps_test_app > /tmp/gps_log.txt &" 但是但是,去查看gps_log.txt的 ...

tab页

tab页的更多相关文章

随机推荐

热门专题