web页面实现tab的功能有几种实现方式，下面是使用UL LI DIV方式实现的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=utf-8" />

    <title>tab</title>

    <style type="text/css">

        .tab { height:23px;}

        .tab ul { list-style:none; }

        .tab li { border:1px solid #ccc; background:#eee; cursor:pointer; display:block; float:left; text-align:center; text-decoration:none; width:68px; font-size:12px; height:21px; line-height:21px; margin:0 2px; position:relative; top:1px; z-index:9; }

        .tab li:hover { text-decoration:underline; }

        .tab li.curr { background:#fff; border-bottom-color:#fff; cursor:default; font-weight:bold; }

        .cc { border:1px solid #ccc; padding:10px; width:300px;}

    </style>

    <script type="text/javascript">

        // tab

        function setTab(name,cursel,n){

            for(i=1;i<=n;i++){

                var menu=document.getElementById(name+i);

                var con=document.getElementById("con_"+name+"_"+i);

                menu.className=i==cursel?"curr":"";

                con.style.display=i==cursel?"block":"none";

            }

        }

    </script>

</head>

<body>

    <div class="tab">

        <ul>

           <li id="a1" onclick="setTab('a',1,3)" class="curr">tab_01</li>

           <li id="a2" onclick="setTab('a',2,3)">tab_02</li>

           <li id="a3" onclick="setTab('a',3,3)">tab_03</li>

        </ul>

    </div>

    <div id="con_a_1" class="cc">11<br />111<br />111<br />111</div>

    <div id="con_a_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>

    <div id="con_a_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>

    <br />

    <br />

    <div class="tab">

        <ul>

           <li id="b1" onmousemove="setTab('b',1,3)" class="curr">tab_01</li>

           <li id="b2" onmousemove="setTab('b',2,3)">tab_02</li>

           <li id="b3" onmousemove="setTab('b',3,3)">tab_03</li>

        </ul>

    </div>

    <div id="con_b_1" class="cc">111<br />111<br />111<br />11</div>

    <div id="con_b_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>

    <div id="con_b_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>

</body>

</html>

UL LI 布局 TAB 切换条的更多相关文章

  1. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  2. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  3. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  4. vue2.0 tab切换几种方式

    第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作) <template> <div id="app"> <ul> <li ...

  5. 论tab切换的几种实现方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...

  6. 用户控件（.ascx）与<ul><li>以及<a>布局之小结

    用户控件(.ascx)与<ul><li>以及<a>布局 小结 一.用户控件(.ascx) 1.aspx是浏览器直接访问的页面,而ascx是用户控件,一般是用来重用. ...

  7. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. DIV+ul+LI实现表格效果以及div带滑动条

    写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...

  9. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

随机推荐

  1. asp中的几个取整函数fix(),int(),round()的用法

    asp中的几个取整函数是:fix(),int(),round(); Int(number).Fix(number)函数返回数字的整数部分.number 参数可以是任意有效的数值表达式.如果 numbe ...

  2. ###《Effective STL》--Chapter1

    点击查看Evernote原文. #@author: gr #@date: 2014-09-12 #@email: forgerui@gmail.com Chapter1 容器 Topic 4: 调用e ...

  3. 第二十七篇、使用MVVM布局页面

    思路:架构的设计模式主要有这么两种 >MVC :这种方式用得很多,也很是常见,不在过多的介绍 >MVVM:使用这种 常常需要导入第三方框架,常见的是响应式框架 >主要讲一下ViewM ...

  4. 问题解决：使用angularjs、ionic框架如何实现返回上一页并刷新

    普通的js返回并刷新这里就不多说了,百度就有很多方法. 下面说的是使用了angularjs.ionic开发的一个手机app中使用的一个返回上一页并刷新的方法. 场景:回复的页面是单独的,点击保存回复后 ...

  5. mysql主配置文件my.cnf详细说明

    MySQL配置文件my.cnf 例子最详细翻译,可以保存做笔记用[转载]#BEGIN CONFIG INFO#DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 ...

  6. 不同的extend 在调用构造函数时不同的写法

     /**  * jQuery.hhNewSilder 滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  7. 高性能IO设计的Reactor和Proactor模式（转）

    在高性能的I/O设计中,有两个比较著名的模式Reactor和Proactor模式,其中Reactor模式用于同步I/O,而Proactor运用于异步I/O操作. 在比较这两个模式之前,我们首先的搞明白 ...

  8. hdu 3572 Task Schedule

    Task Schedule 题意:有N个任务,M台机器.每一个任务给S,P,E分别表示该任务的(最早开始)开始时间,持续时间和(最晚)结束时间:问每一个任务是否能在预定的时间区间内完成: 注:每一个任 ...

  9. C#运算符之与,或,异或及移位运算

    C#运算符之与,或,异或及移位运算 1.剖析异或运算(^) 二元 ^ 运算符是为整型和 bool 类型预定义的.对于整型,^ 将计算操作数的按位“异或”.对于 bool 操作数,^ 将计算操作数的逻辑 ...

  10. splay学习笔记

    伸展树(Splay Tree),也叫分裂树,是一种二叉排序树,它能在O(log n)内完成插入.查找和删除操作.(来自百科) 伸展树的操作主要是 –rotate(x) 将x旋转到x的父亲的位置 voi ...