Hello all,
So I have this code I have been trying to get working for a while now. I have it very close to working (I think). I am a noob to JS but learning fast.
Basically I have a menu with 5 options and 5 divs, I would like the content to show when the matching menu item is clicked. I have set the CSS property
to invisible for the divs. Any help is greatly appreciated
HTML Code:<div class="main-area"> <div id="menu1" class="menu"> <ul> <li><a href="">Menu 1</a></li> </ul> </div> <div id="menu2" class="menu"> <ul> <li><a href="">Menu 2</a></li> </ul> </div> <div id="menu3" class="menu"> <ul> <li><a href="">Menu 3</a></li> </ul> </div> <div id="menu4" class="menu"> <ul> <li><a href="">Menu 4</a></li> </ul> </div> <div id="menu5" class="menu"> <ul> <li><a href="">Menu 5</a></li> </ul> </div> <br></br> <div id="menu1Area" class="mainArea"><p>Text 1</p></div> <div id="menu2Area" class="mainArea"><p>Text 2</p></div> <div id="menu3Area" class="mainArea"><p>Text 3</p></div> <div id="menu4Area" class="mainArea"><p>Text 4</p></div> <div id="menu5Area" class="mainArea"><p>Text 5</p></div> </div>Code:window.onload = show; var activeMenu = null; function show() { var menus = new Array(); var allElems = document.getElementsByTagName("*"); for (var i = 0; i < allElems.length; i++) { if (allElems[i].className == "menu") menus.push(allElems[i]); } for (var i = 0; i < menus.length; i++) { menus[i].onclick = changeDiv; } } function changeDiv(){ if (activeMenu) { closeOldDiv(); menuID = this.id + "Area"; activeMenu = document.getElementById(menuID); activeMenu.style.visibility="visible"; } } function closeOldDiv() { if (activeMenu) { activeMenu.style.visibility="invisible"; activeMenu = null; } }


Reply With Quote
Bookmarks