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. 【MINA】心跳机制

    列上两篇好文章 http://www.cnblogs.com/pricks/p/3832882.html http://blog.csdn.net/cruise_h/article/details/1 ...

  2. c#中字符串显示上标和下标解决办法

    由于工作的需求,需要在word中插入带入带有上标和下标的字符串,比如这样的一个字符串:SO₄²⁻(mg/L).在网上搜了好久,终是摸索出点思路. 解决办法:使用转义字符加Unicode的HexEnti ...

  3. Microsoft JScript 运行时错误: Sys.WebForms.PageRequestManagerParserErrorException无法分析从服务器收到的消息。之所以出现此错误，

    Microsoft JScript 运行时错误: Sys.WebForms.PageRequestManagerParserErrorException: 无法分析从服务器收到的消息.之所以出现此错误 ...

  4. AWK 脚本编写习惯

    教训总结: 不能忽略了脚本语言的编写规范! 创建数组的时候初始化,特别是在for循环中使用的数组: u_count[; g_count[; 认真对待对象,特别是数组的命名: username_to_d ...

  5. DEVMODE 结构体

    typedef struct _devicemode { TCHAR dmDeviceName[CCHDEVICENAME]; //打印机(显示设备)名称 WORD dmSpecVersion; WO ...

  6. thymeleaf的初次使用（带参请求以及调用带参js方法）

    之前对于前端框架接触较少,第一次接触thymeleaf,虽说看起来并不复杂但我还是花费了好一会儿才弄懂. 话不多少下面就简单说一下我在项目中的应用. 首先是java代码 controller层 将需要 ...

  7. Java实战之04JavaWeb-05事务和连接池

    一.事务部分 1．事务的简介 做一件事情,这个一件事情中有多个组成单元,这个多个组成单元要不同时成功,要不同时失败.A账户转给B账户钱,将A账户转出钱的操作与B账户转入钱的操作绑定到一个事务中,要不这 ...

  8. JSP编程中常用的JavaScript技术(转载)

    1.<tronMouseOver=this.style.backgroundColor=’#FFFFFF’ onMouseOut=this.style.backgroundColor=”> ...

  9. Colored Linux Man pages

    Colored Linux Man pages 一.什么是Linux Man 参考: 二.如何高效率地使用Man 三.给Linux Man命令添加点颜色. 1.Unix / Linux: Displa ...

  10. jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...