Use CSS and js to implement the page tag effect. (The number of tags can be dynamically changed)

Use CSS and js to implement the page tag Effect

CSS

<style>.menu{   margin-bottom:-15px; width: 800px;  }  .menu li{   display:block;   float: left;  font-weight: bold; font-size: 12px;  padding: 2px 0;   width:120px;   text-align: center;   cursor:pointer;   background: #A9A9A9;   border-top:1px solid #FFFFFF; border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF;}  .menu li.hover{   background: #FFFFFF;   border-top:1px solid #A9A9A9; border-bottom;1px solid #A9A9A9; border-left:1px solid #A9A9A9; border-right:1px solid #A9A9A9;}#menuContent ul{   display: none;  }  #menuContent ul.block{   display: block;  }</style>

JS

Note:

The initial functions here seem complicated. They are actually designed to dynamically control display labels.

When the first tag is not displayed, the initial status of the second tag is "action.

<SCRIPT type = "text/JavaScript" src = ". /jquery-1.8.js "> </SCRIPT> <SCRIPT> $ (document ). ready (function () {inikindtab () ;}); function inikindtab () {// If (document. getelementbyid ("mainmenu ")! = NULL) {// handle var dticoms#andwallet = document at the beginning of the tab content. getelementbyid ("mainmenu "). getelementsbytagname ("Li"); // var dlicoms#andwallet = document. getelementbyid ("mainmenucontent "). getelementsbytagname ("Ul"); // There are three tabs, some tabs may not be displayed, and the location of the first tab to be displayed (three tabs, with the index 0, 1, 2) // by default, the first tab is displayed as VAR indexshowtab = 0; var indexshowtabflg = true; for (I = 0; I <dticoms#andwallet. length; I ++) {If (indexshowtabflg) {If (dticomshop Andwallet [I]. style. display! = 'None') {indexshowtab = I; indexshowtabflg = false ;}} dticoms#andwallet [I]. classname = ""; dlicoms#andwallet [I]. style. display = "NONE";} // The tab displayed in the first position is a dticoms#andwallet [indexshowtab] that cannot be clicked. classname = "hover"; // dlicoms#andwallet [indexshowtab] is displayed in the tab at the beginning of the position. style. display = "Block" ;}} function settab (menu, index) {var menu = document. getelementbyid ("mainmenu "). getelementsbytagname ("Li"); var menuconte Nt = document. getelementbyid ("mainmenucontent "). getelementsbytagname ("Ul"); for (I = 0; I <menu. length; I ++) {menu [I]. classname = I = index? "Hover": ""; menucontent [I]. style. Display = I = index? "Block": "NONE" ;}}</SCRIPT>

Html

<Div id = "tabs1"> <ul class = "menu" id = "mainmenu"> <li onclick = "settab (mainmenu, 0) "Class =" hover "> tab1 </LI> <li onclick =" settab (mainmenu, 1) "Class =" hover "> tab2 </LI> <li onclick =" settab (mainmenu, 2) "Class =" hover "> tab3 </LI> <li onclick =" settab (mainmenu, 3) "Class =" hover "> tab4 </LI> <li onclick =" settab (mainmenu, 4) "Class =" hover "> tab5 </LI> </ul> <br> <Div class =" menucontent "id =" mainmenucontent "> <ul> label 1 content in </ul> <ul> content in tag 2 </ul> <ul> content in tag 3 </ul> <ul> content in tag 4 </ul> <ul> content in tag 5 </ul> </div>

Use the above Code.

Summary:

The advantage of this method is that the number of tags can change dynamically.