- 浏览: 1306371 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 1038<fmt:formatDate value=&quo ... -
jquery 弹出框 当前页面 居中(有滚动条)
2013-01-24 14:28 12714基于jquery的弹出提示框始终处于窗口的居中位置(类似于a ... -
td显示 不换行,用省略号代替
2013-01-06 13:51 1661css: .td_inline span{ disp ... -
CSS 居中vertical-align
2012-11-21 10:43 779CSS vertical-align 属性 定义和用法 v ... -
js刷新页面--2【转】
2012-10-24 16:33 1011reload 方法,该方法强迫浏览器刷新当前页面。语法:loc ... -
<c:forEach> 详解
2012-08-24 11:52 4151为循环控制,它可以将集合(Collection)中的成员循序浏 ... -
forEach处理List每行显示固定的几个
2012-08-17 16:17 3394我用C标签中的forEach取值,如何每行显示4个,多的在第二 ... -
table中td,tr的 title 显示不全的问题
2012-08-17 16:10 8553<!DOCTYPE html PUBLIC " ... -
table 隔行换色
2012-08-13 17:40 795<!DOCTYPE HTML PUBLIC " ... -
checkbox 默认选中
2012-06-14 15:56 11485<%@ taglib prefix="c&qu ... -
HTML 图片提交按钮【转】
2012-06-14 15:06 1679HTML图片提交按钮 有时候为了达到比较好的视觉效果,有人会 ... -
Css超链接样式
2011-09-29 23:13 1155Css超链接样式的各属性的顺序不能颠倒,这个顺序非常重要。 ... -
表格的简单样式
2011-06-16 12:44 854<HTML> <HEAD> ... -
点击input默认值消失
2011-04-27 10:43 7636<!DOCTYPE HTML PUBLIC " ... -
选中表格行变色标记效果
2011-04-10 11:52 1275<!DOCTYPE html PUBLIC " ... -
HTML enctype 属性
2010-01-30 19:50 1323enctype 属性 -- 代表HTML表单数据的编码方式 ... -
html rel属性
2010-01-21 11:09 1286rel 属性 -- rel属性,描述了当前页面与href所指定 ... -
颜色代码查询
2010-01-14 09:28 972颜色代码查询器 http://tool.cnzz.cn ... -
java实现双向列表选择
2010-01-11 15:09 1597网上的一段代码: html: <html> ... -
固定每个td不换行的的CSS
2010-01-11 13:33 1881如果要固定每个td不换行的话,用<td style=&q ...
相关推荐
JavaScript实现简易tab栏切换案例 本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想: 1)、所有元素全部清除...
基于brootrap跟jquery实现的tabsDamo,简单易理解,需要的同学可以下载参考下
四个tab标题和四个内容区都显示在了页面中,现在要实现tab切换效果,即点击标题一,内容一显示出来,其他内容不显示;点击标题二,内容二显示出来,其他内容不显示…… 那么,整体思路很简单,给四个标题绑定事件,...
本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN...
本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
本文实例为大家分享了JS实现简单tab选项卡切换的具体代码,供大家参考,具体内容如下 本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 <!DOCTYPE html> <...
css实现网易滑动门TAB导航菜单的html代码,简单编写了导航菜单。
HTML+CSS+Jquery实现的tab选项卡特效案例,可以学习一下。导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。这是tab选项卡切换的源代码,...
三种js特效(tab活页夹,斑马线,遮罩层)的简单实现.rar
今天做一个简单的小案例,用js和jquery分别去实现点击tab栏,实现切换的目的,效果如下图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> 状态栏切换</title> <style> * { margin: ...
实现tab切换的主要html代码: <div class=container> <li class=active><a>导航菜单</a></li> <li><a>TAB标签</a></li> <div class=tab_container> <div id=tab1 class=tab_content style=display: ...
tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta ...
前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难。回来后,再把思路理一理,写一个,基础还是很重要的。 最终要实现的效果图如下: (1)点击tab栏显示...
学习tab,或者不想学了,想直接找能用的代码改下,就用这个吧,绝对经典。
它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷。实际上,一直让Vue引以为豪的是它的便捷性、执行力、灵活性。 目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据...
在项目中遇到要实现tab选项卡的关闭功能,项目中用的bootstrap框架,网上有很多插件,我这里只是简单的实现了tab选项卡的切换! < <!DOCTYPE html> <html lang=en> <head> <meta charset=...
HTML5新手小案例,模仿某市的市政网站首页,实现类似的切换效果,新手代码,老鸟请跳过,简单易懂,没有过多的复杂的CSS,HTML5新手请笑纳。
本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net tab切换</title&...
html代码 <!DOCTYPE html> ...实现简单的tab框</title> <link rel="stylesheet" href="css/tabDemo.css" rel="external nofollow" > [removed][removed] <script type="text
本文实例讲述了JavaScript实现的简单Tab点击切换功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab点击切换</title> <style type=...