三种简洁的Tab导航选项卡

最新推荐文章于 2021-04-09 13:46:10 发布
转载 最新推荐文章于 2021-04-09 13:46:10 发布 · 175 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhengxiqiang/archive/2009/08/07/1541499.html

本文介绍了三种不同的Tab菜单实现方案，包括使用纯CSS布局的方法、结合JavaScript进行动态切换展示的技术，以及利用背景定位来实现流畅切换效果的设计思路。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ContractedBlock.gifExpandedBlockStart.gifCode
<!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></font>
</div>

转载于:https://www.cnblogs.com/zhengxiqiang/archive/2009/08/07/1541499.html

前端小白--导航(二)Tab选项卡
拥抱AI Design
12-13 1661
本文主要介绍Tab选项卡，通过原生JS控制显隐性 图片展示前端代码<!DOCTYPE html> <html lang="en"> <head > <meta charset="UTF-8"> <title>JavaScript</title> <link rel="stylesheet" href="style/reset.css"> <link rel="styl
三种简洁的Tab导航（网页选项卡）
12-04
三种简洁的Tab导航（网页选项卡） Tab导航 网页选项卡 滑动门 选项卡切换
【导航栏练习】tab选项卡
weixin_44325613的博客
04-09 192
思路 top div高度 height:40px;border-bottom:1px; 【总的高度为40px+1px= 41px】 li浮动，a变为block元素，display:block;, a未浮动时，高度35px+1px的border-top,然后利用margin-top:4px，位于top下边框线上 a浮动时，高度变为40px,还有1px border-top，总共高度为41px,此时会给其设置背景颜色，会超出.top，覆盖其border-bottom. <style> .
非常不错的三种简洁的Tab导航（网页选项卡）简析
10-30
非常不错的三种简洁的Tab导航（网页选项卡）简析
19. 使用选项卡导航
Jennyni1122的博客
11-05 799
问题 需要在应用程序中为侧向屏幕导航提供可选的选项卡，但Google没有在框架或支持库中提供选项卡小部件。 解决方案 （API Level 7） 我们可以通过Google提供为SDK样本的SlidingTabLayout进行构建来实现选项卡导航。Google已完全淘汰以前的各种Android选项卡，例如TabWidget和ActionBar.Tab，但SlidingTabLayout符合当前的选项...
vue实现标题导航，tab选项卡（一看就会）
编程界明世隐的博客
12-24 2177
效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> ul li { margin: 0; padding: 0; list-style: none;
推荐三种简洁的Tab导航（网页选项卡）简析
10-30
推荐三种简洁的Tab导航（网页选项卡）简析 Tab导航（网页选项卡）是一种常见的网页交互元素，能够帮助用户快速浏览和选择相关信息。在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内...
不规则TAB选项卡效果
09-21
不规则TAB选项卡效果是网页设计中的一个常用元素，主要作用是提供用户界面的导航功能。通过这种设计，用户可以方便地在不同的内容区块之间切换，而无需加载新的页面。在实现不规则TAB选项卡效果时，常见的技术手段是...
jQuery封装的tab选项卡插件分享
10-24
Tab选项卡是一种常见的网页界面元素，用于在同一页面内切换显示不同的内容区域，每个内容区域通常被称为一个“面板”（Panel）。用户点击不同的Tab（标签）可以查看对应的内容，这种设计可以有效地减少页面加载次数...
三种简洁的网页tab选项卡导航简析
C#.Net/通信/网页/WinForm专题
10-08 3622
 在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和AJAX），附有实例，无图片，兼容性较好，方便大家直接使用。第一种形式: 通过更换显示样式实现，这种很常见，就不多说了。新闻评论技术点评新闻列表评论列表技术列表点评列表第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置
三种简洁的Tab导航简析
anjichan4261的博客
08-31 211
<!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><...
最简洁实用的tab切换，tab选项卡
xllily11的袅袅
03-05 308
/*===========所有 tab选项卡 更换显示样式=====================*/          function setTab(m,n){         var tli=document.getElementById("menu"+m).getElementsByTagName("span");         var mli=document.g...
UGUI中按Tab切换InputField
zhangzhen551的专栏
12-15 4623
本文转自风冻冰痕博客，固定链接: http://icemark.cn/blog/?p=253 目前的UGUI在InputField里即使设置了Navigation也是不可以用键盘切换上下，所以自己写了个组件实现这个功能 前提条件是要在InputField里设置Navigation，也就是必须能找到上一个控件和下一个控件 然后将以下脚本挂在需要切换的InputField上，用Tab和Shift
BootStrap实战三之导航条
一个程序员的成长之路。。。
11-13 1669
目标网站：http://www.ghostchina.com/
Bootstrap3基础 navbar 导航条 简单示例
weixin_33806300的博客
03-17 305
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
jquery实现tab切换效果
流绪@微梦
01-23 1万+
(请自己添加jquery) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;scr
各种选项卡
u014330950的博客
05-31 548
无标题文档 function openP(_id) { var select_id = parseInt(_id.replace("box","")); for (i=1;i<=4;i++) { if (i==select_id) { document.getElementById("box"+i).style.display = "block"; } else { document.getEl
Unity之Navigation导航系统
热门推荐
qq_41578401的博客
01-03 1万+
首先，想要实现导航，就必须先烘焙，而烘焙则需要物体呈现一个静态，一个Navigation Static。 然后我们要打开这个Navigation的设定tab，找到上方的windows然后选中Navigation 接下来我们在场景中随意创建一个cube给cube添加一个组件NAV MASH AGENT组件，这是自动导航的必要组件，是加在自动寻路的物体上的。 一开
电动汽车数据集：2025年3K+记录-EV Electrical Vehicles Dataset
最新发布
08-19
电动汽车数据集：2025年3K+记录 真实电动汽车数据：特斯拉、宝马、日产车型，含2025年电池规格和销售数据 关于数据集 电动汽车数据集 这个合成数据集包含许多品牌和年份的电动汽车和插电式车型的记录，捕捉技术规格、性能、定价、制造来源、销售和安全相关属性。每一行代表由vehicle_ID标识的唯一车辆列表。 关键特性 覆盖范围：全球制造商和车型组合，包括纯电动汽车和插电式混合动力汽车。 范围：电池化学成分、容量、续航里程、充电标准和速度、价格、产地、自主水平、排放、安全等级、销售和保修。 时间跨度：模型跨度多年（包括传统和即将推出的）。 数据质量说明： 某些行可能缺少某些字段（空白）。 几个分类字段包含不同的、特定于供应商的值（例如，Charging_Type、Battery_Type）。 各列中的单位混合在一起；注意kWh、km、hr、USD、g/km和额定值。 列 列类型描述示例 Vehicle_ID整数每个车辆记录的唯一标识符。1 制造商分类汽车品牌或OEM。特斯拉 型号类别特定型号名称/变体。型号Y 与记录关联的年份整数模型。2024 电池_类型分类使用的电池化学/技术。磷酸铁锂 Battery_Capacity_kWh浮充电池标称容量，单位为千瓦时。75.0 Range_km整数表示充满电后的行驶里程（公里）。505 充电类型主要充电接口或功能。CCS、NACS、CHAdeMO、DCFC、V2G、V2H、V2L Charge_Time_hr浮动充电的大致时间（小时），上下文因充电方法而异。7.5 价格_USD浮动参考车辆价格（美元）.85000.00 颜色类别主要外观颜色或饰面。午夜黑 制造国_制造类别车辆制造/组装的国家。美国 Autonomous_Level浮点自动化能力级别（例如0-5），可能包括子级别的小
简洁可复用Tab选项卡实现代码
"可重复使用的简洁Tab选项卡是一种在网页设计中实现切换面板效果的代码，允许在同一页面上创建多个独立的选项卡组件。这个代码简单易用，适合那些希望在网页中添加交互式导航功能的开发者。" 本文将详细探讨这种可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值