Trying to create a dynamic tab menu

[jrutter]

I tried to create a javascript switch statement that basically sees if the window.location matches the url and if it does, it will display that code. I have 7 tabs, and one is selected depending on which page you are on, so Im trying to make a javascript function that traces the url and if matches a variable, then it displays that code.

Does anyone know why this wont work?

Here is my code:



switch (window.location.protocol)

{
case "http://centi.lmm.local/dLife/do/ShowContent/about_lmm/mediakit/mediakit_index.html":
document.write("<div id="nav">
<ul>
<li id=current><a href="/dLife/do/ShowContent/about_lmm/mediakit/mediakit_index.html">Home</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/mediakit_offerings.html">Offerings</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/dlife_study.html">dLife Study</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/advisory_board/index.html">Advisory Board</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/press_releases/dlife_news_index.html">dLife in the News</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/mediakit_about_lmm.html">About LifeMed Media</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/contact_us.html">Contact Us</a> </li>
</ul></div> \n")
break

case "http://centi.lmm.local/dLife/do/ShowContent/about_lmm/mediakit/mediakit_offerings.html":
document.write("<div id="nav">
<ul>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/mediakit_index.html">Home</a> </li>
<li id=current><a href="/dLife/do/ShowContent/about_lmm/mediakit/mediakit_offerings.html">Offerings</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/dlife_study.html">dLife Study</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/advisory_board/index.html">Advisory Board</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/press_releases/dlife_news_index.html">dLife in the News</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/mediakit_about_lmm.html">About LifeMed Media</a> </li>
<li ><a href="/dLife/do/ShowContent/about_lmm/mediakit/contact_us.html">Contact Us</a> </li>
</ul></div> \n")
break
}

[simplistik]

you should use some sort of server-side method to do this. php, asp, asp.net, ruby... whatever... pick your poison.

[losergeekdesign]

Simplistik has offered the best solution however what you have written will work, you just need to write it correctly.

Javascript does not like when you break lines like you are. In order for the document.write function to complete you need to make sure your concatenating the string together. By moving down to a new line without concatenating, like your doing, you will kill the function and stop the process in its tracks.

Instead of using a document.write also, it would be better to attach the snippets of code to a variable such as follows:

var menu1 = "<ol>This is my list<li>This is my list item</li></ol>";If you want to keep the code readable there are two ways you can achieve this, they are as follows:

var menu1 = "<ol>This is my list" +
"<li>This is my list item</li>"+
"</ol>";And this:

var menu1 = "<ol>This is my list"\
"<li>This is my list item</li>"\
"</ol>";
If your going to attach it to a variable like this its good practice to write the variable as innerHTML of a div rather then use document.write. There are arguments for and against this but using innerHTML to me is faster and cleaner then using document.write.

This will keep your formatting of the code clear so you know what is what rather then having one long line of code that is hard to read. Like simplistik said, the better, and more appropriate way would be to use php, .net etc. But if you want to stick with javascript, you must either make the document.write statement parameter one line, one really long line, or you must concatenate, like th two examples above.

I hope I've explained this well enough and that I'm not to late to be posting to this. Let me know if this helps or not.