html - Javascript menu and box display -
apparently there issue code can't find, because code isn't running when click on menu links. i'm creating menu dynamically changes content of adjacent box, , appearance of menu links depending on menu link clicked. here simplified version of code:
html:
<td class="instructioncells" colspan="1" width="25%"> <a href="#" onclick="helpmenu(showid)" class="link" id="dashboardlink" style="color: black; text-decoration: none;">the marketing dashboard</a> <div style="height:4px;"> </div> <a href="#" onclick="helpmenu(showid)" class="link" id="methodlink">selecting method</a> </td> <td width="75%" style="vertical-align: top;"> <div id="mymarketingdashboard" style="display: block;"> <div class="font4" style="text-align: center"> marketing dashboard </div> </div> <div id="selectmethod" style="display: none;"> <div class="font4" style="text-align: center"> selecting method </div> </div> </td>
javascript:
function helpmenu(showid) { var showdashboard = document.getelementbyid("mymarketingdashboard"); var showmethod = document.getelementbyid("selectmethod"); var mymarketing = document.getelementbyid("dashboardlink"); var method = document.getelementbyid("methodlink"); if (showid == "dashboardlink") { showdashboard.style.display = "block"; mymarketing.style.color = "black"; mymarketing.style.textdecoration = "none"; showmethod.style.display = "none"; method.style.color = "#2c3a7f"; method.style.textdecoration = "underline"; } if (showid == "methodlink") { showdashboard.style.display = "none"; mymarketing.style.color = "#2c3a7f"; mymarketing.style.textdecoration = "underline"; showmethod.style.display = "block"; method.style.color = "black"; method.style.textdecoration = "none"; }
any on finding why code isn't running awesome. in advance.
i made changes code:
javascript:
helpmenu = function (showid) { var showdashboard = document.getelementbyid("mymarketingdashboard"); var showmethod = document.getelementbyid("selectmethod"); var mymarketing = document.getelementbyid("dashboardlink"); var method = document.getelementbyid("methodlink"); if (showid == "dashboardlink") { showdashboard.style.display = "block"; mymarketing.style.color = "black"; mymarketing.style.textdecoration = "none"; showmethod.style.display = "none"; method.style.color = "#2c3a7f"; method.style.textdecoration = "underline"; } if (showid == "methodlink") { showdashboard.style.display = "none"; mymarketing.style.color = "#2c3a7f"; mymarketing.style.textdecoration = "underline"; showmethod.style.display = "block"; method.style.color = "black"; method.style.textdecoration = "none"; } }
markup:
<table><tr><td class="instructioncells" colspan="1" width="25%"> <a href="#" onclick="helpmenu(this.id)" class="link" id="dashboardlink" style="color: black; text-decoration: none;">the marketing dashboard</a> <div style="height:4px;"> </div> <a href="#" onclick="helpmenu(this.id)" class="link" id="methodlink">selecting method</a> </td> <td width="75%" style="vertical-align: top;"> <div id="mymarketingdashboard" style="display: block;"> <div class="font4" style="text-align: center"> marketing dashboard </div> </div> <div id="selectmethod" style="display: none;"> <div class="font4" style="text-align: center"> selecting method </div> </div> </td></tr></table>
jsfiddle: http://jsfiddle.net/uxqd9/1/
i pass id of clicked anchor helpmenu
function.
Comments
Post a Comment