|
Posted by RobG on June 25, 2008, 2:18 am
Please log in for more thread options >
> > Hello,
>
> > In a simple HTML page, index.html, I have:
> > - 3 anchors: A, B and C;
> > - 3 divs: dA, dB and dC;
>
> > Each anchor should load, when clicked, index.html but anchor A should
> > make dA visible and the other invisible, anchor B should show dB and
> > hide the others.
>
> > How can I do this?
>
> > Thanks,
> > Miguel
>
> This was tested very quickly but works in IE 7.
>
> It uses Javascript but you didn't specify a scripting language of
> choice.
>
> <code>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
> TR/html4/strict.dtd">
> <html lang=3D"en">
> <head>
> <title>Dynamic Java Querystring</title>
> </head>
> <body>
> <script type=3D"text/javascript">
> <!--
HTML-style comment delimiters should not be used inside script
elements.
> =A0 =A0 =A0 =A0 function querySt(param) {
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var loc =3D window.location.search.substr=
ing(1);
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var query =3D loc.split("&");
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 for (i=3D0;i<query.length;i++) {
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var currParam =3D query[i=
].split("=3D");
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 if (currParam[0] =3D=3D p=
aram) {
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 return currParam[1];
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 }
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 }
> =A0 =A0 =A0 =A0 }
> -->
That is incorrect even if the comment delimiters were useful, it
should be:
//-->
> </script>
> <a href=3D"test.htm?q=3DDa">A</a>
> <a href=3D"test.htm?q=3DDb">B</a>
> <a href=3D"test.htm?q=3DDc">C</a>
> <div id=3D"Da" style=3D"visibility: hidden;">
> <p>Div A</p>
> </div>
> <div id=3D"Db" style=3D"visibility: hidden;">
> <p>Div B</p>
> </div>
> <div id=3D"Dc" style=3D"visibility: hidden;">
> <p>Div C</p>
> </div>
> <script type=3D"text/javascript">
> <!--
> =A0 =A0 =A0 =A0 document.getElementById(querySt('q')).style.visibility =
=3D 'visible';
> -->
The problem with this approach is that if the user has scripting
disabled, or it isn't supported, they will not see any content. Much
better to use the HTML class attribute to associate visibility, then
use script to load the relevant style sheet to set the applicable rule
and hide the elements.
--
Rob
| 
XML Sitemap