Switch Navigation Styles with CSS and change style on flow

COPY - Insert Between Head Tags: <HEAD></HEAD>

function showhide(div,nest){
	obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0; 
	if(obj.display=='block' || obj.display=='block') obj.display='none'
	else obj.display='block'
}

function show(div,nest){
	obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0; 
	obj.display='block'
}

function hide(div,nest){
	obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0; 
	obj.display='none'
}
//--></script>

COPY - Insert Inside Body: <BODY></BODY>

Change Style on flow...<input type=radio name=xx value=mich onclick="changeSheets(1)" checked>SystemColor <input type=radio name=xx value=mich onclick="changeSheets(2)">Black or <input type=radio name=xx value=mich onclick="changeSheets(3)">none! <a href="mailto:info@jdstiles.com">WebMaster</a><br>
<a href="http://www.jdstiles.com/javamain.html"><b>More Javascripts like this one can be found here.</b></a><hr>

<a class=navi href=# onclick="showhide('aa');hide('bb');hide('cc');hide('dd');hide('ee')">About me</a><br>
<DIV id=aa class=wech>
<a class=sub href=#>link 01</a><br>
<a class=sub href=#>link 02</a><br>
<a class=sub href=#>link 03</a><br>
<a class=sub href=#>link 04</a></DIV>

<a class=navi href=# onclick="showhide('bb');hide('aa');hide('cc');hide('dd');hide('ee')">My Photos</a><br>
<DIV id=bb class=wech>
<a class=sub href=#>link 05</a><br>
<a class=sub href=#>link 06</a><br>
<a class=sub href=#>link 07</a><br>
<a class=sub href=#>link 08</a></DIV>

<a class=navi href=# onclick="showhide('cc');hide('aa');hide('bb');hide('dd');hide('ee')">Music</a><br>
<DIV id=cc class=wech>
<a class=sub href=#>link 09</a><br>
<a class=sub href=#>link 10</a><br>
<a class=sub href=#>link 11</a><br>
<a class=sub href=#>link 12</a></DIV>

<a class=navi href=# onclick="showhide('dd');hide('aa');hide('bb');hide('cc');hide('ee')">Design</a><br>
<DIV id=dd class=wech>
<a class=sub href=#>link 13</a><br>
<a class=sub href=#>link 14</a><br>
<a class=sub href=#>link 15</a><br>
<a class=sub href=#>link 16</a></DIV>

<a class=navi href=# onclick="showhide('ee');hide('aa');hide('bb');hide('cc');hide('dd')">Contact</a><br>
<DIV id=ee class=wech>
<a class=sub href=#>link 17</a><br>
<a class=sub href=#>link 18</a><br>
<a class=sub href=#>link 19</a><br>
<a class=sub href=#>link 20</a></DIV>

Download entire script as zip file

Uncle Jims Web Designs: Change Stylesheet Options on Demand