非常不错的三种简洁的Tab导航(网页选项卡)简析

朐山路

朐山路

2016-02-19 09:07

下面请跟着图老师小编一起来了解下非常不错的三种简洁的Tab导航(网页选项卡)简析,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!
在网页中应用选项卡可以使网页显得更紧凑,结合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
  ulli评论列表/li/ul
  ulli技术列表/li/ul
  ulli点评列表/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
   ulli评论列表/li/ul
   ulli技术列表/li/ul
   ulli点评列表/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;itli.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


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
展开更多 50%)
分享

猜你喜欢

非常不错的三种简洁的Tab导航(网页选项卡)简析

Web开发
非常不错的三种简洁的Tab导航(网页选项卡)简析

三种简洁的Tab导航(网页选项卡)

Web开发
三种简洁的Tab导航(网页选项卡)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX结合CSS实现的网页Tab选项卡效果

Web开发
AJAX结合CSS实现的网页Tab选项卡效果

网页选项卡TAB设计原则和应用案例教程

Web开发
网页选项卡TAB设计原则和应用案例教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页选项卡设计宽度的猜想

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页选项卡设计宽度的猜想

JQuery Tab选项卡效果代码改进版

Web开发
JQuery Tab选项卡效果代码改进版

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何在WPS文字中定义直线的起始点和终止点

如何在WPS文字中定义直线的起始点和终止点

word自选图形的阴影

word自选图形的阴影
下拉加载更多内容 ↓