html - Changing classes in a menu with Javascript -
i looking create simple functionality of clicking on menu tab , changes color let know page on. novice please take easy on me...lol
/menu in php header file/
<ul class="tabs" id="tabs"> <li class="selected"><a href="http://bestofthebestent.com/index.php">home</a></li> <li class="inactive"><a href="http://bestofthebestent.com/bio.php">bio</a></li> <li class="inactive"><a href="http://bestofthebestent.com/photo.php">photo</a></li> <li class="inactive"><a href="http://bestofthebestent.com/music.php">thank</a></li> <li class="inactive"><a href="http://bestofthebestent.com/contact.php">contact</a></li> </ul> /*this javascript file*/ window.onload = initpage; function initpage() { var tabs = document.getelementbyid("tabs").getelementsbytagname("li"); (var i=0; i<tabs.length; i++){ var links = tabs[i]; links.onclick = tabclicked; } } function tabclicked(){ var tabid = this.id; document.getelementbyid(tabid).classlist.toggle("selected"); var tabs = document.getelementbyid("tabs").getelementsbytagname("li"); (var i=0; < tabs.length; i++){ var currenttab = tabs[i]; if (currenttab.id !== tabid){ currenttab.class = "selected"; } else { currenttab.class = "inactive"; } } }
element.setattribute("class", "classname");
Comments
Post a Comment