Home >Web Front-end >JS Tutorial >A brief analysis of three very good concise Tab navigation (web page tabs)_javascript skills

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

WBOYOriginal: 2016-05-16 19:09:101506browse

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

 < li onclick="setTab(0,1)">Comments 
Technology

Comments

News list

Comments list

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

Technology

Comments

News List

Comment List

Technology List

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

News content

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to the super strong IE background image flickering (jittering)_javascript skillsNext article：Solution to the super strong IE background image flickering (jittering)_javascript skills

See more

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

Related articles