最新消息:网站旨在学习交流,转载文章会尽力标明出处,如有侵权行为请联系(联系方式见页面底部)本站删除

三种简洁的经典高效的DIV+CSS制作的Tab导航简析!

网站建设 爱立排 来源:Searcheo 1浏览 0评论

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

Css代码

    <divid="tabs0">

    <ulclass="menu0"id="menu0">

    <lionclick="setTab(0,0)"class="hover">新闻</li>

    <lionclick="setTab(0,1)">评论</li>

    <lionclick="setTab(0,2)">技术</li>

    <lionclick="setTab(0,3)">点评</li>

    </ul>

    <divclass="main"id="main0">

    <ulclass="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)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。

Css代码

    <divid="tabs1">

    <divclass="menu1box">

    <ulid="menu1">

    <liclass="hover"onmouseover="setTab(1,0)"><ahref="#">新闻</a></li>

    <lionmouseover="setTab(1,1)"><ahref="#">评论</a></li>

    <lionmouseover="setTab(1,2)"><ahref="#">技术</a></li>

    <lionmouseover="setTab(1,3)"><ahref="#">点评</a></li>

    </ul>

    </div>

    <divclass="main1box">

    <divclass="main"id="main1">

    <ulclass="block"><li>新闻列表</li></ul>

    <ul><li>评论列表</li></ul>

    <ul><li>技术列表</li></ul>

    <ul><li>点评列表</li></ul>

    </div>

    </div>

    </div>

第一、二种形式的JS代码:

Js代码

    functionsetTab(m,n){

    vartli=document.getElementById("menu"+m).getElementsByTagName("li");/*获取选项卡的LI对象*/

    varmli=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)实现效果。

Css代码

    <divid="tabs2">

    <divclass="menu2box">

    <divid="tip2"></div>

    <ulid="menu2">

    <liclass="hover"onmouseover="nowtab(2,0)"><ahref="#">新闻</a></li>

    <lionmouseover="nowtab(2,1)"><ahref="#">评论</a></li>

    <lionmouseover="nowtab(2,2)"><ahref="#">技术</a></li>

    <lionmouseover="nowtab(2,3)"><ahref="#">点评</a></li>

    </ul>

    </div>

    <divclass="main"id="main2">

新闻内容</div></div>

转载请注明:爱立排 » 三种简洁的经典高效的DIV+CSS制作的Tab导航简析!

猜你喜欢

SEO优化之网站导航的优化的方法!

树的主要部位是树干,人的中枢神经是心脏。网站优化的核心是什么呢?那就是网站导航的优化。seo教程中指出,在网站中作为网站主要栏目文章等分类的网站的导航是非常重要的,它主要是对网站产品进行归类,对网站的细分化和规范化起到引导作用,主要是分布在网站的左面...

干货!网站导航优化六大招!让百度爱上你的导航!

所谓的网站的导航栏指的是引导用户访问网站的栏目、菜单、在线帮助、分类等布局结构等形式的总称。 网站导航栏就像是网站的指路牌,告诉用户需要的内容在哪里,所以网站建设的过程中一定要使网站导航结构清晰,能够使访问者在最短时间内找到自己喜欢的内容。优秀的导航...

SEO优化技巧之网站导航设置的四个重要因素!

今天写的是关于导航设置的文章,因为我发现很多中小型的网站根本不明白导航设置的意义,基本都是一味的在导航中放置自己的产品从而展现给用户,这样的设置在大部分情况下是不符合逻辑的,那么我们应该怎么设置更利于用户体验呢?下面我们一起讨论下。 1、网站设置导...

用户体验优化怎么做?从网站页面布局优化用户体验!

用户体验优化怎么做?从网站页面布局优化用户体验! 一、关键词排名是综合因素展现。(因为大家对于单一因素过于看重)  要保证PV高,就很难保证页面停留的增加。综合因素很难进行控制,如果我们控制跳出率、回头率,那么我们就没法来控制页面停留时间,反过来也...

avatar
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址