UL LI 布局 TAB 切换条
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 切换条的更多相关文章
- 为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性
会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...
- DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
- vue2.0 tab切换几种方式
第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作) <template> <div id="app"> <ul> <li ...
- 论tab切换的几种实现方法
tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...
- 用户控件(.ascx)与<ul><li>以及<a>布局之小结
用户控件(.ascx)与<ul><li>以及<a>布局 小结 一.用户控件(.ascx) 1.aspx是浏览器直接访问的页面,而ascx是用户控件,一般是用来重用. ...
- DIV+CSS布局重新学习之css控制ul li实现2级菜单
竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- DIV+ul+LI实现表格效果以及div带滑动条
写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...
- 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)
Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...
随机推荐
- 【转】代码高处走 从VC6到VC9移植代码问题说明
首先可以直接用Visual Studio 2008的打开VC6的工作区文件和项目文件(dsw和dsp),并将其升级为VS2008的解决方案格式和项目格式(sln和vcproj),VC9的编译器相对于V ...
- netbeans环境中使用maven搭建jsf、primefaces工程
新建maven工程,选择web工程 增加jsf框架,加入primefaces 部署到服务器,在浏览器中打开页面,这是primefaces框架的页面. 此时工程web目录下有如下文件 web.xml文件 ...
- JQuery里的原型prototype分析
在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript ...
- sql server 2008如何保存Emoji表情
1.将就的方法已找到,在保存前,Emoji表情字符串进行utf-8编码,然后写入数据表的nvarchar(max)字段,取出时再进行解码即可. c#的写法如下: 写入数据表前编码: string sH ...
- 三分钟学会CSS3中的FLEXBOX布局
原文地址,保护版权,请勿转载:http://page.factj.com/blog/p/2574 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现 ...
- ajax和jsonp的封装
一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博 ...
- DLL详解及Denpendcy Walker的使用
下面的文章被N次转载,为了尊重原作,\(^o^)/~,贴出最早发布这篇文章的地址及作者. 动态链接库 Windows的活动大陆 2006-07-26 09:21 作者:狂ρκ来源:电脑爱好者 在 ...
- <<深入Java虚拟机>>-虚拟机类加载机制-学习笔记
类加载的时机 遇到new.getstatic.putstatic或invokestatic这4个字节码指令时,如果类没有进行过初始化,则需要先触发其初始化.生成这4条指令最常见的Java场景是:使用n ...
- JS函数的参数对象arguments在严格模式下的限制
在JS中,传入的函数的参数个数可以与定义函数的个数不一致,那么对于传入的实参的引用,则是arguments对象.然而改对象在严格模式和非严格模式下是由区分的: 1 在严格模式下arguments作为了 ...
- 如何自动拼接 Update语句,仅Update已修改的字段
我们通常使用update语句更新数据库记录,例如使用update user set username='001', nickname='Tom', age=18 where id = 1语句更新use ...