- 浏览: 1328991 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
kay11:
...
JAVA生成简单的随机字符串(a-zA-Z0-9) -
zhangliguoaccp:
您好关于登录页面的验验证码这块怎么解决的?还有登录成功后,跳转 ...
JAVA,模拟HTTP登录 -
107x:
不错,谢谢!
<c:foreach 循环 map -
wenjin:
不知楼主是不还在想请叫一下我自己开的Tomcat下载一个文件C ...
Android 下载文件及写入SD卡 -
zyywgf:
JSTL c标签,fn标签,fmt标签
html中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=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body,div,ul,li{ margin:0 auto; padding:0; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none; } .main{ clear:both; padding:8px; text-align:center; } /*第一种形式*/ #tabs0 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; } .menu0{ width: 400px; } .menu0 li{ display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; background: #FFFFff; } .menu0 li.hover{ background: #f2f6fb; } #main0 ul{ display: none; } #main0 ul.block{ display: block; } /*第二种形式*/ #tabs1{ text-align:left; width:400px; } .menu1box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left; } #menu1{ position:absolute; top:0; left:0; z-index:1; } #menu1 li{ float:left; display:block; cursor:pointer; width:72px; text-align:center; line-height:21px; height:21px; } #menu1 li.hover{ background:#fff; border-left:1px solid #333; border-top:1px solid #333; border-right:1px solid #333; } .main1box{ clear:both; margin-top:-1px; border:1px solid #333; height:181px; width:400px; } #main1 ul{ display: none; } #main1 ul.block{ display: block; } /*第三种形式*/ .menu2box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left; background: #FFFFff; } #tabs2 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; } #tip2{ position:absolute; top:0; left:0; height:22px; line-height:22px; z-index:0; width:100px; background: #f2f6fb; } #menu2{ position:absolute; top:0; left:0; z-index:1; } #menu2 li{ display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(m,n){ var tli=document.getElementById("menu"+m).getElementsByTagName("li"); var mli=document.getElementById("main"+m).getElementsByTagName("ul"); for(i=0;i<tli.length;i++){ tli[i].className=i==n?"hover":""; mli[i].style.display=i==n?"block":"none"; } } /*第三种形式 利用一个背景层定位*/ var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"} function nowtab(m,n){ if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML; document.getElementById("tip"+m).style.left=n*100+'px'; document.getElementById("main2").innerHTML=m3[n]; } //--> </script> </head> <body> <br /> <br /> <!--第一种形式--> <div id="tabs0"> <ul class="menu0" id="menu0"> <li onclick="setTab(0,0)" class="hover">新闻</li> <li onclick="setTab(0,1)">评论</li> <li onclick="setTab(0,2)">技术</li> <li onclick="setTab(0,3)">点评</li> </ul> <div class="main" id="main0"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul> </div> </div> <br /> <br /> <!--第二种形式--> <div id="tabs1"> <div class="menu1box"> <ul id="menu1"> <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li> <li onmouseover="setTab(1,1)"><a href="#">评论</a></li> <li onmouseover="setTab(1,2)"><a href="#">技术</a></li> <li onmouseover="setTab(1,3)"><a href="#">点评</a></li> </ul> </div> <div class="main1box"> <div class="main" id="main1"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul> </div> </div> </div> <br /> <br /> <!--第三种形式--> <div id="tabs2"> <div class="menu2box"> <div id="tip2"></div> <ul id="menu2"> <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li> <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li> <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li> <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li> </ul> </div> <div class="main" id="main2"> 新闻内容 </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
效果图:
发表评论
-
fmt:formatDate 格式说明
2013-05-10 10:46 1078<fmt:formatDate value=&quo ... -
jquery 弹出框 当前页面 居中(有滚动条)
2013-01-24 14:28 12783基于jquery的弹出提示框始终处于窗口的居中位置(类似于a ... -
td显示 不换行,用省略号代替
2013-01-06 13:51 1734css: .td_inline span{ disp ... -
CSS 居中vertical-align
2012-11-21 10:43 828CSS vertical-align 属性 定义和用法 v ... -
js刷新页面--2【转】
2012-10-24 16:33 1068reload 方法,该方法强迫浏览器刷新当前页面。语法:loc ... -
<c:forEach> 详解
2012-08-24 11:52 4205为循环控制,它可以将集合(Collection)中的成员循序浏 ... -
forEach处理List每行显示固定的几个
2012-08-17 16:17 3440我用C标签中的forEach取值,如何每行显示4个,多的在第二 ... -
table中td,tr的 title 显示不全的问题
2012-08-17 16:10 8606<!DOCTYPE html PUBLIC " ... -
table 隔行换色
2012-08-13 17:40 848<!DOCTYPE HTML PUBLIC " ... -
checkbox 默认选中
2012-06-14 15:56 11528<%@ taglib prefix="c&qu ... -
HTML 图片提交按钮【转】
2012-06-14 15:06 1721HTML图片提交按钮 有时候为了达到比较好的视觉效果,有人会 ... -
Css超链接样式
2011-09-29 23:13 1210Css超链接样式的各属性的顺序不能颠倒,这个顺序非常重要。 ... -
表格的简单样式
2011-06-16 12:44 900<HTML> <HEAD> ... -
点击input默认值消失
2011-04-27 10:43 7709<!DOCTYPE HTML PUBLIC " ... -
选中表格行变色标记效果
2011-04-10 11:52 1321<!DOCTYPE html PUBLIC " ... -
HTML enctype 属性
2010-01-30 19:50 1374enctype 属性 -- 代表HTML表单数据的编码方式 ... -
html rel属性
2010-01-21 11:09 1348rel 属性 -- rel属性,描述了当前页面与href所指定 ... -
颜色代码查询
2010-01-14 09:28 1011颜色代码查询器 http://tool.cnzz.cn ... -
java实现双向列表选择
2010-01-11 15:09 1633网上的一段代码: html: <html> ... -
固定每个td不换行的的CSS
2010-01-11 13:33 1915如果要固定每个td不换行的话,用<td style=&q ...
相关推荐
使用纯HTML和CSS,你可以创建一个简单的Tab结构,通过CSS控制隐藏和显示内容。通过JavaScript添加交互性,比如点击Tab时切换内容。例如,可以使用`<input type="radio">`作为Tab按钮,`<div>`作为内容区,通过...
在这个主题中,我们将深入探讨如何使用 HTML 和 CSS 实现一个简洁的选项卡功能。 首先,HTML 结构是构建选项卡的基础。一个简单的选项卡通常包含一个容器(如`<div>`),里面有两个主要部分:一个是用于显示选项卡...
总结来说,实现Web开发中的简单Tab页,主要涉及HTML结构布局、CSS样式设计以及JavaScript交互逻辑。理解这些基本原理后,开发者可以根据项目需求选择合适的方法和技术栈进行实现。在LeoSolution提供的压缩包文件中,...
在Vue.js框架中,多标签页(Tab)的实现是一个常见的需求,特别是在构建复杂的Web应用时,它能够帮助用户组织和切换不同的视图或功能。本教程将详细讲解如何使用Vue.js来创建一个简单的多标签页系统,并提供了一个...
在网页设计中,Tab切换效果是一种常见的交互设计模式,它允许用户通过点击不同的标签来切换显示不同的内容区域。本教程将详细介绍如何仅使用HTML和CSS技术实现这种效果,无需依赖JavaScript进行动态控制。 首先,...
HTML Tab 实现是一种常见的网页设计技术,用于组织和展示页面上的多部分内容,让用户可以在不同的面板之间切换,提高用户体验。在不使用任何JavaScript库或框架的情况下,纯HTML和CSS也能实现基本的Tab组件。本篇...
以下是一个简单的实现步骤: 1. **HTML结构**:首先,创建Tab按钮和内容区域的HTML结构。通常,我们将Tab按钮设置为链接(`<a>`标签)或者按钮(`<button>`标签),内容区域使用`<div>`标签,并设置初始状态下所有...
HTML5滑动页面切换Tab是现代网页设计中常见的一种交互方式,它允许用户通过滑动手势或点击Tab来浏览不同的内容区域。这种功能在移动设备上尤其流行,因为触摸屏的交互方式更适合滑动操作。以下是对这个主题的详细...
这个简单的 JavaScript 实现依赖于元素的索引和类名的管理,使得用户可以通过点击 Tab 标签轻松切换页面内容。这种功能在很多网页应用中都很常见,例如产品介绍、用户设置、数据统计等场景。 总的来说,这个示例...
通过以上步骤,你可以在Asp.net 2.0环境中轻松实现一个简易的菜单Tab切换功能。这个功能对于提升网站的用户体验有着显著的作用,同时也能帮助开发者更好地组织和展示Web应用程序的内容。在实际开发过程中,还可以...
一个简单的Tab布局可以由一个包含多个`<div>`的容器组成,每个`<div>`代表一个Tab。我们可以使用CSS的`display: flex`属性来实现水平排列,同时通过`overflow-x: auto`来启用横向滚动。`<div>`内部则包含相应Tab的...
jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得实现Tab切换功能变得更加简单。下面我们将详细讨论如何使用jQuery实现Tab切换功能。 首先,我们需要在HTML中构建Tab的结构。一个...
在多层Tab标签实现中,我们将有主Tab和子Tab。主Tab与基本Tab组件类似,但每个主Tab下面会有一个子Tab导航。子Tab可以通过嵌套`<ul>`来创建,并使用`data-parent`属性指向其对应的主Tab的`id`。 ```html ...
至此,一个简单的JS实现的Tab菜单效果就完成了。这个基础的实现可以作为起点,根据实际需求进行扩展,例如添加键盘导航支持、触发动画、响应式布局等特性。理解这一过程对于网页开发者来说至关重要,因为它能帮助...
本教程将基于提供的`tab2011.css`和`tab2011.js`文件,探讨如何通过JavaScript实现一个简单的Tab滚动方法。 首先,`tab2011.css`文件通常包含样式规则,用于定义Tab导航条以及内容区域的布局和样式。例如,它可能...
在本案例中,"html_Tab.zip_ js tab_Tabú_html tab_js tab_tab" 提供了一个关于如何使用这两种技术创建动态Tab组件的示例。Tab组件通常用于将大量内容组织成可切换的不同部分,提高用户体验,使页面看起来更整洁、...
JavaScript 实现简易 tab 栏切换是一种常见的网页交互功能,它允许用户通过点击不同的选项卡来切换显示的内容。在本文中,我们将深入理解如何使用 JavaScript 来实现这一效果,并结合给出的代码片段进行详细讲解。 ...
以下是一个简单的Tab切换实现步骤: 1. 创建HTML结构,包括Tab按钮和内容区域,每个Tab按钮对应一个内容区域。 2. 使用CSS3选择器为Tab按钮添加默认样式和激活状态样式。 3. 利用Flexbox布局将Tab按钮水平排列。 4....
"tab切换html代码"通常涉及HTML、CSS和JavaScript(或者jQuery)的结合使用,以实现这种功能。 HTML部分: HTML是构建页面结构的基础,一般会创建一个包含多个`<div>`的容器,每个`<div>`代表一个tab面板,而`<ul>`...
在网页设计中,Tab页是一种常见的用户界面元素,它能够帮助组织和展示大量信息,使得用户可以方便地在不同内容间切换。本教程将详细讲解如何使用HTML和CSS来创建一个灵活、响应式的Tab页。 首先,我们需要创建HTML...