栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现(不涉及滑动门和AJAX),附有实例,无图片,兼容性较好,方便大家直接使用。

第一种形式: 通过更换显示样式实现,这种很常见,就不多说了。
复制代码 代码如下:


  新闻
  评论
  技术
  点评


  
  • 新闻列表

  •   
    • 评论列表

      
    • 技术列表

      
    • 点评列表




    第二种形式: 这种结构比较复杂一些,外面加一个相对层(.menu1box),设置溢出隐藏,将选项卡(#menu1)设为绝对定位,设置层指针为1(z-index:1;),以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边,上空白(margin-top)为-1px,使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。
    复制代码 代码如下:


      
       新闻
       评论
       技术
       点评
      


      
       
  • 新闻列表

  •    
    • 评论列表

       
    • 技术列表

       
    • 点评列表

      



    第一、二种形式的JS代码:
    复制代码 代码如下:
    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[i].className=i==n?"hover":""; 
      mli[i].style.display=i==n?"block":"none"; 
    }
    }

    第三种形式: 这也是一种不常用的方式,加一个相对层(.menu2box),利用一个背景层(#tip2)定位,通过改变层的左距离(left)实现效果。
    复制代码 代码如下:


      
      
       新闻
       评论
       技术
       点评
      

      
    新闻内容




    [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/119729.html
    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号