<!--
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程
Editor:weasle
Email:weasle@163.com
QQ:112011531
-->
<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{
padding:0;
text-align:center;
}
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;}
/*选项卡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>
<div id="Tab2">
<div class="Menubox">
<ul>
<li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li>
<li id="two2" onclick="setTab('two',2,4)" >新闻2</li>
<li id="two3" onclick="setTab('two',3,4)">新闻3</li>
<li id="two4" onclick="setTab('two',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_two_1" >新闻列表1</div>
<div id="con_two_2" style="display:none">新闻列表2</div>
<div id="con_two_3" style="display:none">新闻列表3</div>
<div id="con_two_4" style="display:none">新闻列表4</div>
</div>
</div>
</body>
分享到：
相关推荐
纯CSS简洁TAB是一种在网页设计中实现导航菜单或者切换面板的常见技术，它不依赖JavaScript或者其他后端语言，仅通过CSS样式来实现交互效果。这种技术对于初学者来说非常友好，因为它简化了网页开发的复杂性，同时也...
在这个"菜鸟封装的一个简洁tab页"项目中，我们可以探讨以下几个关键知识点： 1. **HTML结构**： - Tab页的基本结构通常包括一个容器（如div）用于包裹所有tab，每个tab是一个单独的按钮，以及对应的面板内容。按钮...
"JS网站常用简洁TAB选项卡"是一个专为网页开发设计的资源，旨在提供一种简单、高效的选项卡实现方式，具有良好的浏览器兼容性，适用于各种现代网页项目。 首先，我们要理解选项卡的基本工作原理。选项卡通常由一组...
css+div简洁tabcss+div简洁tabcss+div简洁tabcss+div简洁tab
【纯CSS简洁TAB标签代码】是一种常见的网页设计技术，它允许在有限的空间内展示多个页面或内容区域，并通过切换不同的选项卡来展示不同的内容。在这个压缩包文件中，"纯CSS简洁TAB标签代码"可能包含了一系列CSS样式...
### 可重复使用的简洁Tab选项卡 #### 概述 本文档将深入解析一个名为“可重复使用的简洁Tab选项卡”的网页元素实现方法。该组件旨在通过简单的代码结构实现页面内的多组Tab（标签页）切换功能，适用于需要在单个...
zepto实现的简洁tab选项卡，亲测可用
纯CSS简洁TAB标签代码! 很值得下载看看!资源免费,大家分享!!
【简洁TAB菜单】是一种常见的网页设计元素，常用于在有限的空间内展示多个页面或功能选项。这个主题涉及了三个核心技术：HTML、CSS和JavaScript。HTML（HyperText Markup Language）是网页内容的基础结构语言，CSS...
本教程将深入讲解如何使用jQuery实现简洁的Tab标签功能，适用于网页界面设计，提高用户体验。 首先，让我们了解什么是Tab标签。Tab标签是一种常见的网页布局方式，用于将大量信息组织成不同的部分，用户可以通过...
### jQuery实现未经美化的简洁TAB菜单效果 #### 知识点概述： 1. **jQuery实现TAB菜单的基本原理**： 使用jQuery实现TAB菜单的核心在于事件监听与样式切换。通过监听鼠标点击事件，当用户点击不同的TAB项时，页面...
本资源“JS网站常用简洁TAB选项卡特效代码”提供了一种简单易用的解决方案，帮助开发者快速构建功能丰富的选项卡组件。选项卡设计在网站上广泛使用，能够有效地组织和展示大量信息，提高用户体验。 选项卡特效代码...
"TAB式简洁导航菜单"是一种常见的设计模式，尤其适用于那些希望提供清晰、直观用户体验的网站。本教程将深入探讨如何使用JavaScript实现这种菜单效果。 首先，我们需要理解“TAB式”菜单的基本概念。这种菜单通常由...
纯CSS简洁TAB标签特效代码是一种常见的前端开发技术，主要用于网页设计中的导航菜单或者信息展示。在不依赖JavaScript的情况下，仅通过CSS（层叠样式表）实现动态切换的效果，既节省了资源，又提高了页面加载速度。...
### js+css实现的简洁tab菜单：代码与应用解析 #### 标题解析 标题“js+css做的tab菜单，代码很简洁，推荐使用！”直接点明了文章的主题，即利用JavaScript（简称js）和层叠样式表（CSS）来构建一个简洁、高效的...
标题“Tab页 代码简洁”表明我们将讨论一个关于实现简洁美观Tab页的编程实践，特别是使用简洁的JS（JavaScript）代码。这种简洁的代码实现对于开发者来说，意味着易于理解和维护，同时也方便快速集成到项目中。 ...
"jQuery简洁版tab标签"是一个利用jQuery库实现的简单、可定制化的Tab组件。这个组件的核心在于利用jQuery的事件处理和DOM操作功能，以实现高效且流畅的切换效果，尤其是当主要内容区域需要支持左右滚动时。 jQuery...
这款“简洁的Bootstrap垂直tab选项卡”旨在提供一种更直观、节省空间的用户界面，尤其适用于内容丰富的网页。在这个项目中，开发者通过对Bootstrap原生选项卡组件进行定制，实现了垂直布局，使得用户可以在页面的一...