文档章节

记录一个简洁的html tab 标签

 谢锡鹏
发布于 2014/06/27 15:33
字数 337
阅读 59
收藏 0
点赞 0
评论 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
博文 17
码字总数 12485
作品 0
广州
火狐标签管理器--Tab Candy

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

匿名 ⋅ 2010/07/27 ⋅ 0

myTextarea 简洁的在线文本编辑器

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

虫虫 ⋅ 2012/02/27 ⋅ 3

简洁后台管理模版

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

Jeff.Zhong ⋅ 2017/12/01 ⋅ 0

Android:include标签

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

u010635353 ⋅ 2016/12/20 ⋅ 0

【android基础学习之八】——页面布局

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

晨曦之光 ⋅ 2012/03/08 ⋅ 0

Google Chrome 浏览器常用快捷键大全

1 标签页和窗口快捷键 2 功能快捷键 3 网页快捷键 4 鼠标快捷键

deniro ⋅ 06/11 ⋅ 0

Dreamweaver格式化html代码提高代码质量

一、快速启动:Dreamweaver-html源代码自动格式化 把自己页面的源代码按照标准的格式整理好!也就是类似于: <table> <tr> <td> XXX </td> </tr> </table> 的格式,标签必须对整齐。 首先在[编辑......

刘小p ⋅ 2011/08/10 ⋅ 2

Github Atom v1.9.8 和 1.10.0-beta5 发布

Github Atom v1.9.8 和 1.10.0-beta5发布了,Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页...

oschina ⋅ 2016/08/11 ⋅ 15

Tab Mix Lite CE

Tab Mix Lite CE 可辅助 Firefox 的标签式浏览功能。它是 Sociz(原Mozine)开发团队在 Tab Mix Lite 的基础上开发的社区定制版,适合追求简洁明快的轻度标签式浏览使用者。 主要功能: 在新...

匿名 ⋅ 2008/11/19 ⋅ 0

Google Chrome开发版更新至2.0.159.0,修复了严重bug

Chrome开发版更新至2.0.159.0,修复了tab标签会突然变小,下载时会去到错误目录等严重bug。Google Chrome(谷歌浏览器)是由Google开发的一款可让您更快速、轻松且安全地使用网络的浏览器,它的...

红薯 ⋅ 2009/01/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 今天 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部