web页面实现tab的功能有几种实现方式,下面是使用UL LI DIV方式实现的tab。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>tab</title>
  6. <style type="text/css">
  7. .tab { height:23px;}
  8. .tab ul { list-style:none; }
  9. .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; }
  10. .tab li:hover { text-decoration:underline; }
  11. .tab li.curr { background:#fff; border-bottom-color:#fff; cursor:default; font-weight:bold; }
  12. .cc { border:1px solid #ccc; padding:10px; width:300px;}
  13. </style>
  14. <script type="text/javascript">
  15. // tab
  16. function setTab(name,cursel,n){
  17. for(i=1;i<=n;i++){
  18. var menu=document.getElementById(name+i);
  19. var con=document.getElementById("con_"+name+"_"+i);
  20. menu.className=i==cursel?"curr":"";
  21. con.style.display=i==cursel?"block":"none";
  22. }
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <div class="tab">
  28. <ul>
  29. <li id="a1" onclick="setTab('a',1,3)" class="curr">tab_01</li>
  30. <li id="a2" onclick="setTab('a',2,3)">tab_02</li>
  31. <li id="a3" onclick="setTab('a',3,3)">tab_03</li>
  32. </ul>
  33. </div>
  34. <div id="con_a_1" class="cc">11<br />111<br />111<br />111</div>
  35. <div id="con_a_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>
  36. <div id="con_a_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>
  37. <br />
  38. <br />
  39.  
  40. <div class="tab">
  41. <ul>
  42. <li id="b1" onmousemove="setTab('b',1,3)" class="curr">tab_01</li>
  43. <li id="b2" onmousemove="setTab('b',2,3)">tab_02</li>
  44. <li id="b3" onmousemove="setTab('b',3,3)">tab_03</li>
  45. </ul>
  46. </div>
  47. <div id="con_b_1" class="cc">111<br />111<br />111<br />11</div>
  48. <div id="con_b_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div>
  49. <div id="con_b_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div>
  50. </body>
  51. </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. GlusterFS集群文件系统概述

    http://blog.csdn.net/zonelan/article/details/8468383 1.      GlusterFS概述 GlusterFS是Scale-Out存储解决方案Gl ...

  2. [leetcode]最长递增序列

    class Solution { public: int lengthOfLIS(vector<int>& nums) { int n=nums.size(); ) ; vecto ...

  3. n个骰子的点数

    把n个骰子扔在地上,所有骰子朝上的一面的点数之和为s.输入n,打印出s的所有可能的值和出现的概率. 解法一:基于递归求骰子点数. /////////////////基于递归求骰子点数///////// ...

  4. OpenJudge 2680 化验诊断 C++

    链接地址:http://bailian.openjudge.cn/practice/2680 题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 下表是进行血常规检验的正常值参考范围 ...

  5. 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(三)

    jar包完成后,剩下就是要构建ANE包来供实际程序调用. 首先要建两个Flex库项目, default那个是官方建议加上的,仅用于不在真实环境下编译调试的时候有个默认接口不至于调用不成功报错,项目结构 ...

  6. Huffman Coding 哈夫曼编码

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4096079.html 使用优先队列实现,需要注意以下几点: 1.在使用priority_qu ...

  7. rpm方式安装gcc缺少依赖项的解决方法

    使用rpm方式安装gcc时,有时会报缺少依赖项: libmpfr.so.1 is needed by cpp-4.4.4-13.el6.i686 libppl.so.7 is needed by cl ...

  8. Redhat 6.5 x64 下载地址

    http://ftp.okhysing.is/ftp/redhat/6.5/isos/x86_64/

  9. Git问题:Cannot update paths and switch to branch 'dev' at the same time.

    使用命令 $ git checkout -b develop origin/develop 签出远程分支,出现以下错误: fatal: Cannot update paths and switch t ...

  10. CentOS 最小化安装后安装桌面

    通过yum的方式安装: yum groupinstall -y   "Desktop"   "Desktop Platform"   "Desktop ...