文档章节

记录一个简洁的html tab 标签

 谢锡鹏
发布于 2014/06/27 15:33
字数 337
阅读 80
收藏 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.4K
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
851
0

没有更多内容

加载失败,请刷新页面

加载更多

sql 开窗函数

开窗函数:在开窗函数出现之前存在着很多用 SQL 语句很难解决的问题,很多都要通过复杂的相关子查询或者存储过程来完成。为了解决这些问题,在 2003 年 ISO SQL 标准加入了开窗函数,开窗函数...

hblt-j
9分钟前
0
0
使用Vue动态生成form表单的实例代码

具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展。 欢迎大家s...

嫣然丫丫丫
16分钟前
0
0
NEO区块链-DAPP开发直通车-第零篇

什么是DAPP DAPP 是以太坊发明的词汇 Decentralized Application. 目前基于区块链技术开发的应用程序广泛的接受使用了这一名称。 NEL将为开发DAPP提供全面的服务 什么是NEL NEL是 “NewEcon...

NEO-FANS
20分钟前
1
0
可视化软件VisIt在Ubuntu18.04上的安装

可视化软件VisIt在Ubuntu18.04上的安装 参考文档及使用说明 1.下载 在官网下载页面下载合适版本的安装文件,Ubuntu有专用的 https://wci.llnl.gov/simulation/computer-codes/visit/executa...

佚文
26分钟前
1
0
selenium之表格的定位

真的勇士, 敢于直面惨淡的warning、 敢于正视淋漓的error 目录 被测试网页的HTML代码 1.遍历表格所有单元格 2.定位表格中的某个元素 3.定位表格中的子元素 总结 浏览器网页常常会包含各类表...

程序猿拿Q
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部