文档章节

记录一个简洁的html tab 标签

 谢锡鹏
发布于 2014/06/27 15:33
字数 337
阅读 71
收藏 0

<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">  

 

ul{ list-style:none;} 

/*选项卡1*/ 

#Tab1{ 

width:460px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*选项卡2*/ 

#Tab2{ 

width:576px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*菜单class*/ 

.Menubox { 

width:100%; 

background:url(http://www.jb51.net/upload/small/20079299441652.gif); 

height:28px; 

line-height:28px; 

.Menubox ul{ 

margin:0px; 

padding:0px; 

.Menubox li{ 

float:left; 

display:block; 

cursor:pointer; 

width:114px; 

text-align:center; 

color:#949694; 

font-weight:bold; 

.Menubox li.hover{ 

padding:0px; 

background:#fff; 

width:116px; 

border-left:1px solid #A8C29F; 

border-top:1px solid #A8C29F; 

border-right:1px solid #A8C29F; 

background:url(http://www.jb51.net/upload/small/200792994426548.gif); 

color:#739242; 

font-weight:bold; 

height:27px; 

line-height:27px; 

.Contentbox{ 

clear:both; 

margin-top:0px; 

border:1px solid #A8C29F; 

border-top:none; 

height:181px; 

text-align:center; 

padding-top:8px; 

--> 

</style> 

<script> 

<!-- 

/*第一种形式 第二种形式 更换显示样式*/ 

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?"hover":""; 

con.style.display=i==cursel?"block":"none"; 

//--> 

</script> 

</head> 

<body>



 

<div id="Tab1"> 

<div class="Menubox"> 

<ul> 

<li id="one1" onClick="setTab('one',1,4)" class="hover">新闻1</li> 

<li id="one2" onClick="setTab('one',2,4)" >新闻2</li> 

<li id="one3" onClick="setTab('one',3,4)">新闻3</li> 

<li id="one4" onClick="setTab('one',4,4)">新闻4</li> 

</ul> 

</div> 

<div class="Contentbox"> 

<div id="con_one_1" class="hover">新闻列表1</div> 

<div id="con_one_2" style="display:none">新闻列表2</div> 

<div id="con_one_3" style="display:none">新闻列表3</div> 

<div id="con_one_4" style="display:none">新闻列表4</div> 

</div> 

</div>

</body>


© 著作权归作者所有

共有 人打赏支持
粉丝 1
博文 19
码字总数 12485
作品 0
广州
火狐标签管理器--Tab Candy

浏览器的作用在过去十年内取得突飞猛进的发展,如今人们在网上同时处理多个任务,比如计划出行、购物、分享图片、听音乐、查看邮件、撰写博客等。这就为浏览器的标签显示带来了挑战,因为同时...

匿名
2010/07/27
1K
0
myTextarea 简洁的在线文本编辑器

myTextarea是一个简洁的在线文本编辑器于2011年9月份创建。它使用了HTML和JQuery技术搭建,利用了HTML5的 localStorage 功能来保存数据。 myTextarea追求的是速度和简洁。你可以用myTextare...

虫虫
2012/02/27
2.3K
3
简洁后台管理模版

原文地址:简洁后台管理模版 之前给客户开发一个简单的后台管理系统,本来准备套用AdminLTE的,但客户嫌弃太臃肿,而且又需要有多tab页面切换,于是从我代码库中找到好久前就写过的管理后台,...

Jeff.Zhong
2017/12/01
0
0
Android:include标签

开发就是这样,总能再不经意间发现你不曾注意的点,唯有记录下来,供自己和遇到此问题的人查阅。 最近在试着搭Android框架,遇到一些以前可能忽略的问题,特此记录一下。 无论是前端基本的h...

u010635353
2016/12/20
0
0
【android基础学习之八】——页面布局

声明:学习的书籍《Android应用开发揭秘》,这里记录学习该书籍的日志,引用的相关代码与总结描述,没有商业的用途,完全是自我学习的一个记录,刚刚学习不可避免会出现很多问题,若是有错误...

晨曦之光
2012/03/08
834
0

没有更多内容

加载失败,请刷新页面

加载更多

svn 常用操作命令及问题处理

1. 常用命令 1.1. 基本使用 检出 checkout ➜ svn co repo_url -m '检出代码'➜ svn co repo_url saved_dir_name -m '检出代码,并指定目录名' 加入版本控制 add # 添加指定文件➜ svn...

whoru
21分钟前
1
0
记一次jquery validate的扩展(第一次失去焦点时触发校验)

最近在用jquery.validate 做前端表单校验,但是发现每次第一次失去焦点时,如果文本框内容为空,且该字段是必填项, 则不会触发校验,直到提交表单后,再次失去焦点时,才会触发,想对此进行...

foreach
25分钟前
0
0
java生成UUID

UUID介绍: UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的。按照开放软件基金会(OSF)制定的标准计算,用到了以...

编程SHA
28分钟前
0
0
Docker Compose 原理

Docker 的优势非常明显,尤其是对于开发者来说,它提供了一种全新的软件发布机制。也就是说使用 docker 镜像作为软件产品的载体,使用 docker 容器提供独立的软件运行上下文环境,使用 dock...

Java干货分享
42分钟前
0
0
解决过滤器中设置cookie无效的问题

解决过滤器中设置cookie无效的问题 代码现场 filterChain.doFilter(sessionSyncRequestWrapper, response);Cookie emailCook = WebServletUtil.getSelectedCookie(request.getCookies(), ......

黄威
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部