三种简洁的网页tab选项卡导航简析

转载 2007年10月08日 11:28:00

 在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现(不涉及滑动门和AJAX),附有实例,无图片,兼容性较好,方便大家直接使用。
第一种形式: 通过更换显示样式实现,这种很常见,就不多说了。
<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>第二种形式: 这种结构比较复杂一些,外面加一个相对层(.menu1box),设置溢出隐藏,将选项卡(#menu1)设为绝对定位,设置层指针为1(z-index:1;),以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边,上空白(margin-top)为-1px,使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。
<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>第一、二种形式的JS代码:
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*获取选项卡的LI对象*/
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*获取主显示区域对象*/
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":""; /*更改选项卡的LI对象的样式,如果是选定的项则使用.hover样式*/
mli[i].style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/
}
}第三种形式: 这也是一种不常用的方式,加一个相对层(.menu2box),利用一个背景层(#tip2)定位,通过改变层的左距离(left)实现效果。
<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>效果演示:
运行代码框

<!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-www.jzxue.com-建站学</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)"><href="#">新闻</a></li>
   
<li onmouseover="setTab(1,1)"><href="#">评论</a></li>
   
<li onmouseover="setTab(1,2)"><href="#">技术</a></li>
   
<li onmouseover="setTab(1,3)"><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)"><href="#">新闻</a></li>
   
<li onmouseover="nowtab(2,1)"><href="#">评论</a></li>
   
<li onmouseover="nowtab(2,2)"><href="#">技术</a></li>
   
<li onmouseover="nowtab(2,3)"><href="#">点评</a></li>
  
</ul>
 
</div>
  
<div class="main" id="main2">
新闻内容
 
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

vuejs实现的的竖向tab选项卡

Document *{padding: 0;margin: 0} #tabemplyee{ width: 800px;heigh...
  • ysydao
  • ysydao
  • 2016年12月11日 22:44
  • 2698

layui-选项卡

layui-选项卡
  • ajlgl
  • ajlgl
  • 2017年05月19日 09:09
  • 42742

Bootstrap使用Tab和dropdown实现导航下拉菜单效果

Dropdown
  • u012493556
  • u012493556
  • 2016年08月10日 17:06
  • 1778

【Android UI设计与开发】第11期:顶部标题栏(二)ActionBar实现Tab选项卡和下拉导航列表

在上一篇文章中,我们只是大概的了解了一下关于ActionBar这个类的简单用法,今天我会继续以实例进行更加深入的讲解。   一、实现Tab选项标签          当你想要在...
  • hengshujiyi
  • hengshujiyi
  • 2013年07月09日 18:58
  • 8550

tab标签(选项卡)切换实现

//导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var n...
  • u011019141
  • u011019141
  • 2016年04月10日 22:39
  • 1686

【Swiper插件应用-01】基于Swiper实现的列表切换效果

最近在研究一个移动端触摸滑动插件Swiper,发现还不错。想做一些移动端轮播效果,tab切换效果的童鞋可以好好的研究一下,蛮方便的。这里把官网地址贴一下,里面有详细的API文档和中文教程:http:/...
  • a46262563
  • a46262563
  • 2015年09月08日 11:47
  • 9117

微信小程序开发之选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.ind...
  • sinat_17775997
  • sinat_17775997
  • 2016年12月12日 17:21
  • 1903

mui选项卡跳转问题

1.mui预加载跳转 首页 持仓 我的 //mui初始化 mui.init({ swipeBack: true //启用右滑...
  • webZRH
  • webZRH
  • 2017年06月23日 09:04
  • 1526

CSS tab选项卡(标签页)切换

在github上看到一篇 You dot need JavaScript 很多效果不需要js也能做到,比如手风琴的效果,轮播,弹出的对话框,工具提示,标签页的切换,多级的下拉菜单等等,css甚至还能做...
  • baiding1123
  • baiding1123
  • 2016年07月12日 15:22
  • 1692

Tab选项卡切换

Tab选项卡切换 基本代码 HTML代码: div id="notice" class="notice"> div id="notice-tit...
  • winfredzen
  • winfredzen
  • 2016年05月06日 11:40
  • 1750
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:三种简洁的网页tab选项卡导航简析
举报原因:
原因补充:

(最多只允许输入30个字)