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. MySQL高可用解决方案(MySQL HA Solution)

    http://blog.sina.com.cn/s/blog_7e89c3f501012vtr.html 什么是高可用性?很多公司的服务都是24小时*365天不间断的.比如Call Center.这就 ...

  2. shell脚本实例(2)

    1.传给脚本一个参数:目录,输出该目录中文件最大的,文件名和文件大小 #!/bin/bash if [ $# -ne 1 -o ! -d $1 ];then echo "Args is er ...

  3. JQuery里的原型prototype分析

    在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript ...

  4. 转：jQuery对象与dom对象的转换

    jQuery对象与dom对象的转换 发布时间:September 20, 2007 分类:JavaScript <新站上线的手记> <Discuz!多附件上传选择框之jQuery版& ...

  5. ugui自制摇杆。

    珍爱生命,远离插件. 以上8个字,好好理解. 反正我是这么觉得. 我说的是unity,不是魔兽世界. 总有一天,我会一句一句写出属于自己的东西. 可以开始主题了.         如图所示,建立一个画 ...

  6. 比之前那个版本更简单的C语言实现的比较大小

    之前那个是输入一堆数据,找最大那个,这次是更简单的版本,求两个数的最大值. #include "stdafx.h" #include <stdio.h> int Get ...

  7. 九度OJ 1408 吃豆机器人 -- 动态规划

    题目地址:http://ac.jobdu.com/problem.php?pid=1408 题目描述: 淘宝公司内部有许多新鲜的小玩具,例如淘宝智能机器人.小时候,大家都玩过那个吃豆子的游戏吧,这机器 ...

  8. 把URL传递参数转变成自定义实体方法

    先定义下要获取的实体: public class InputClass { public long Id { get; set; } public int Status { get; set; } p ...

  9. Python3 IO

    在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘,所以,读写文件就是请求操作系统打开一个文件对象(通常称为文件描述符),然后,通过操作系统提供的接口从这个文件对象中 ...

  10. Oracle procedure存储过程/function函数

    --函数的创建 create function func1(dno number) return NUMBER--必须带有返回值 is v_max number;--定义返回值 begin selec ...