A brief analysis of three very good concise Tab navigation (web page tabs)_javascript skills

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: achieved by changing the display style. This is very common, so I won’t go into details.

Copy code The code is as follows:

• News

Comments

• Technology


• Comments

• News list

• Comments list

Technology List

• Comments List

The second form: This structure is more complicated. Add a relative layer (.menu1box) outside, set overflow hiding, and set the tab (#menu1) For absolute positioning, set the layer pointer to 1 (z-index:1;) so that it covers the lower main box (.main1box) by 1px. Set the border of the main block 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.

Copy code The code is as follows:

• News


• Comments a>


• Technology

< ;li onmouseover="setTab(1,3)">Comments

> ;

• News List

• Comment List

• Technology List li>

• Review List

;/div>


The first and second forms of JS code:

Copy code Code As follows: function setTab(m,n){

var tli=document.getElementById("menu" m).getElementsByTagName("li"); /*Get the LI object of the tab */

var mli=document.getElementById("main" m).getElementsByTagName("ul"); /*Get the main display area object*/
for(i=0;i tli[i].className=i==n?"hover":""; /*Change the style of the LI object of the tab, if it is the selected item, use the .hover style*/
mli[i].style.display=i==n?"block":"none"; /*Determine which object is displayed in the main area*/
}
}


The third form: This is also an uncommon method. Add a relative layer (.menu2box), use a background layer (#tip2) to position, and achieve the effect by changing the left distance (left) of the layer.

Copy code The code is as follows:

• News


• Comments


• Technology


• Comments
  

News content

<meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>Simple Tab</title> <style type="text/css"> <!-- body,div,ul,li{ margin:0 auto; padding:0; } body{ font:12px "瀹</style>