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. SAX方式解析XML文件实例

    books.XML文件: 书籍book.java实体类: public class Book { private String id; private String name; private Str ...

  2. android开发 锁屏 真正的锁屏，是go锁屏那种。

    想做个锁屏界面很久了,最近一周,历经千辛万苦,越过种种挫折,终于完美实现了这一要求,在此将锁屏思路分享出来. 注意:这不是什么一键锁屏,是类似“go锁屏”那样的锁屏界面. 准备:本程序共需要 两个ac ...

  3. ###Maintainable C++

    点击查看Evernote原文. #@author: gr #@date: 2014-08-15 #@email: forgerui@gmail.com 记录一些标准规范.让自己的编码更可读,更可维护. ...

  4. Xcode中 xx duplicate symbols for architecture i386错误提示

    今天在编译iOS项目时Xcode报如下错误: ld: 15 duplicate symbols for architecture i386 clang: error:linker command fa ...

  5. IOS 高级开发 KVC（一）

    熟练使用KVC 可以再开发过程中可以给我们带来巨大的好处,尤其是在json 转模型的时候,KVC让程序员摆脱了繁琐无营养的代码堆积.减少代码量就是减少出错的概率.KVC 用起来很灵活,这种灵活的基础是 ...

  6. 02两栈共享空间_DoubleStack--(栈与队列)

    #include "stdio.h" #include "stdlib.h" #include "io.h" #include " ...

  7. Python快速入门学习笔记（二）

    注:本学习笔记参考了廖雪峰老师的Python学习教程,教程地址为:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb49318210 ...

  8. yiic创建YII应用 "php.exe"不是内部或外部命令 解决办法

    第一步:运行CMD命令.   第二步:进入Yiic文件的目录   (例如在D盘里面 D:/yii/framework)   第三步:D:\yii\framework>yiic webapp D: ...

  9. Linux CPU亲缘性详解

    前言 在淘宝开源自己基于nginx打造的tegine服务器的时候,有这么一项特性引起了笔者的兴趣.“自动根据CPU数目设置进程个数和绑定CPU亲缘性”.当时笔者对CPU亲缘性没有任何概念,当时作者只是 ...

  10. 【转】C#中没有id 没有name C#怎么点击按钮

    HTML按钮元素 <input type="submit" value="确定" class="dialogbtn" C# 执行代码 ...