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. HttpClient的使用

    HttpClient的使用 一.简介 HttpClient是Apache Jakarta Common下的子项目,用来提供高效的.最新的.功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTT ...

  2. 修改arcgis server默认js和css连接地址

    当使用ArcGIS Server 10.1发布了一个地图服务之后,在ArcGIS Server 10.1的机器上使用浏览器进入http://localhost:6080/arcgis/rest/ser ...

  3. 自定义函数实现NULL值替换

    数据库环境:SQL SERVER 2005 有时候,想将查询查询数来的数据格式化一下,不希望显示NULL值,或者复制表的数据时,被插入的表不允许有NULL. 我们可以通过ISNULL()函数或者COA ...

  4. 使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型

    如果需要在浏览器上显示 3D 画面的话, 现在一般会使用 ​WebGL, 典型的例如 three.js(​http://mrdoob.github.com/three.js/), 但是 WebGL 对 ...

  5. 模板：LCS（最长公共子序列）

    #include <cstring> #define max(a,b) ((a) > (b) ? (a) : (b)) int same(char ch1,char ch2) { ; ...

  6. jQuery.hhLRSlider 左右滚动图片插件

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

  7. oracle,wamp,FZ突然出现问题，求解决方案（未解决，最终系统还原）

    -----背景------- 系统:win7  64位oracle 11g(11.1)每天都用oracle.用toad for oracle .电脑固定IP.未更改任何配置信息.用了几个月,突然出现了 ...

  8. php中的修饰符

    上面使用了一个修饰符U,详见关于修饰符的介绍. PHP正则表达式修饰符的理解: 在PHP正则表达式里面的修饰符可以改变正则的很多特性,使得正则表达式更加适合你的需要(注意:修饰符对于大小写是敏感的,这 ...

  9. PS学习笔记

    PS学习笔记 常用快捷键 快捷键 功能 Ctrl+T 自由变换 Ctrl+Alt+Shift+T 复制图层+再次变换 Alt+Del 以前景色填充 Ctrl+Del 以背景色填充 Ctrl+I 反相 ...

  10. Get your Windows product key from a script

    The product key is located in the registry under HKLM\Software\Microsoft\Windows NT\CurrentVersion I ...