Brief analysis of three simple, classic and efficient DIV CSS tab navigation_html/css_WEB-ITnose

Applying tabs to a web page can make the web page appear more compact, and combining it with AJAX technology can allow the page to display more content in a limited space. This article mainly introduces the implementation of several simple tab effects (not involving sliding doors and AJAX), with examples, no pictures, good compatibility, and convenient for everyone to use directly. The first form: implemented by changing the display style. This is very common, so I won’t go into details.

<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>

The second form: This structure is more complicated. Add a relative layer (.menu1box) outside, set overflow hiding, set the tab (#menu1) to absolute positioning, and set the layer pointer to 1 (z-index :1;), so that the height of the lower main block (.main1box) can be covered by 1px. Set the main block's border to a 1px black border, and the top margin (margin-top) to -1px, so that the top border extends under the tab. When you change the background of a tab item (li) to white, you can cover part of the upper border of the main area. This effect is achieved.

<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>

The first and second forms of JS code:

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)实现效果。<pre class="brush: html; gutter: true; first-line: 1; highlight: []; html-script: false"><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>