|
Javascript: Dynamic Menus
I'm working on a site for a restaurant. The site calls for 2 menus at the moment, the lunch menu and the dinner menu. I created a script that would dynamically change the menu images according to the page number clicked, that way there isn't a separate page for each menu page or the need for the page to be refreshed to see the next menu page.
Only 2 things need to be changed and they're both classes of divs with ids. I call the div by its id and then change its class by whatever page number is clicked. I then change the link to a different color, again by changing the class, to show that it is the current page. The function works for both lunch and dinner menus, as you will see. Here is the code: :: Code ::
function changeMenu(menu,number){ if(menu == "lunch"){ c = "lc"; p = "lp"; } else if(menu == "dinner"){ c = "dc"; p = "dp"; } cont = document.getElementById(c); pageImg = document.getElementById('bot'); link1 = document.getElementById('one'); link2 = document.getElementById('two'); link3 = document.getElementById('three'); if(number == 1){ link1.class="sbover"; } else if(number == 2){ link2.class="sbover"; } else if(number == 3){ link3.class="sbover"; } else{ number=1; link1.class="sbhover"; } cont.class=c.number; pageImg.class=p.number; } The links look like this: :: Code ::
<div id="sbwrap"> <div id="sub_box"> Page: <a href="#" onclick="changeMenu('dinner',1)" id="one">One</a> | <a href="#" onclick="changeMenu('dinner',2)" id="two">Two</a> | <a href="#" onclick="changeMenu('dinner',3)" id="three">Three</a> </div> </div> And the menu looks like this: :: Code ::
<div id="container" class="dinner"> <div id="dintitle"></div> <div id="dincont"> <div id="dc" class="dc1"></div> </div> <div id="bot" class="dp1"></div> </div> For some reason, nothing happens when I click the link. I can't figure out what's wrong with my code and decided maybe you guys could help. I'm a bit rusty with javascript; I haven't used it in a long time. Help! Back to top |
|||||
|
All times are GMT - 8 Hours
|
|||||