Link soll sich bei offener Seite ändern

Status
Nicht offen für weitere Antworten.

Sascha_77

Grünschnabel
Hi Folx.

Habe folgendes Problem:

Ich habe eine Seite die mittels Frames in 3 Bereich aufgeteilt ist. Oben einen Frame der über die gesamte Breite geht. Dann in der 2. Zeile links eine Schmale Navigationsleiste mit den Entsprechenden links. Und Rechts davon eben der Bereich wo die Inhalte ausgegeben werden sollen. Jetzt möchte ich das wenn man auf einen link klickt und dieser sich dann rechts öffnet, das der link in der Navileiste solange kursiv dargestellt wird, bis der Benutzer wieder aus diesem link raus ist. Wie kann ich das am besten machen?

Greetz
Sascha
 
Vielleicht hilft dir folgender CSS- und Javascript-Code weiter, der in dem Navigations-Frame eingesetzt wird:

HTML:
<style type="text/css">
<!--
a.nav, a.clicked {
font-style: normal;
}

a.nav:hover, a.clicked {
font-style: italic;
}
-->
</style>

<script type="text/javascript">
<!--
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
//-->
</script>
HTML:
<a class="clicked" href="#link1" onclick="aktivieren(this.href)" target="NameDesFrames">Link 1</a>
<a class="nav" href="#link2" onclick="aktivieren(this.href)" target="NameDesFrames">Link 2</a>
<a class="nav" href="#link3" onclick="aktivieren(this.href)" target="NameDesFrames">Link 3</a>
 
Danke für die schnelle antwort. Aber irgendwie krieg ich das nicht ganz hin. Ich häng mal den Quelltext hintendran:

HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<style type="text/css"> 
		p,h3,h1 { line-height:5px; } 
		<!--.nicht_unterstrichen { text-decoration:none;}-->
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="generator" content="Adobe GoLive" />
		<title>Navigation</title>
	</style>
		<title>Navigation</title>
	</head>
		<body background="images/hintergrund.gif" bgcolor="#ffc998" link="#3b0707" vlink="black" leftmargin="0" marginwidth="0">
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="index.html" target="_top"><font size="3">Home</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="produkte.html" target="navigation"><font size="3">Produkte</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="zuechter.html" target="text"><font size="3">Z&uuml;chter</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="formular.html" target="text"><font size="3">Formulare</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="hund/hund.html" target="text"><font size="3">Konditionen</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="cgi-data/newsletter/abo_form.html" target="text"><font size="3">Newsletter</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="cgi-bin/sitesearch.php.cgi" target="text"><font size="3">Suche</font></a></p>
		<p><font size="3" color="#ffc998">..</font><font size="3" color="#ffffcc"><a class="nicht_unterstrichen" href="cgi-bin/guestbook.php.cgi" target="text">G&auml;stebuch</a></font></p>
		<p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="impressum.html" target="text"><font size="-2">Impressum</font></a><font size="3"> </font><font size="-2">/</font><font size="3"> </font><a class="nicht_unterstrichen" href="agb.html" target="text"><font size="-3">AGB</font></a></p>
		<p><font color="#ffffcc"><img src="images/maus.gif" alt="" usemap="#mausc05d72d3" align="left" border="0" /><map name="mausc05d72d3"><area shape="circle" coords="66,45,4" href="admin/admin.html" alt="" target="navigation" /></map></font></p>
	</body>

</html>
 
Probiere es mal mit diesem Quelltext:

HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="generator" content="Adobe GoLive" />
<title>Navigation</title>

<style type="text/css">
p,h3,h1 { line-height:5px; }

a.nav, a.clicked {
font-style: normal;
}

a.nav:hover, a.clicked {
font-style: italic;
}
</style>

<script type="text/javascript">
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
</script>

</head>
<body background="http://www.tutorials.de/forum/images/hintergrund.gif" bgcolor="#ffc998" link="#3b0707" vlink="black" leftmargin="0" marginwidth="0">
		<p><font size="3" color="#ffc998">..</font><a class="clicked" href="index.html" target="_top"><font size="3">Home</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nav" href="produkte.html" target="navigation"><font size="3">Produkte</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nav" href="zuechter.html" target="text"><font size="3">Z&uuml;chter</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nav" href="formular.html" target="text"><font size="3">Formulare</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nav" href="hund/hund.html" target="text"><font size="3">Konditionen</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nav" href="cgi-data/newsletter/abo_form.html" target="text"><font size="3">Newsletter</font></a></p>
		<p><font size="3" color="#ffc998">..</font><a class="nav" href="cgi-bin/sitesearch.php.cgi" target="text"><font size="3">Suche</font></a></p>
		<p><font size="3" color="#ffc998">..</font><font size="3" color="#ffffcc"><a class="nav" href="cgi-bin/guestbook.php.cgi" target="text">G&auml;stebuch</a></font></p>
		<p><font size="3" color="#ffc998">..</font><a class="nav" href="impressum.html" target="text"><font size="-2">Impressum</font></a><font size="3"> </font><font size="-2">/</font><font size="3"> </font><a class="nav" href="agb.html" target="text"><font size="-3">AGB</font></a></p>
		<p><font color="#ffffcc"><img src="http://www.tutorials.de/forum/images/maus.gif" alt="" usemap="#mausc05d72d3" align="left" border="0" /><map name="mausc05d72d3"><area shape="circle" coords="66,45,4" href="admin/admin.html" alt="" target="navigation" /></map></font></p>

</body>
</html>
 
Hmmm das ist nicht der gewünschte effekt. Zumal jetzt auch alle Links wieder unterstrichen sind. Das war ja vorher nicht so. Hatte ich mittels decoration-text none abgestellt. Und jetzt änder sich nur der link in Kursiv wenn ich mit der maus drüberfahre.

Gut wäre aber, wenn der link solange kursiv bleibt bis der User auf einen anderen link drückt.
 
Also, die Textunterstreichung kannst du selbstverständlich noch deaktivieren :rolleyes:

CSS:
a.nav, a.clicked {
text-decoration: none;
font-style: normal;
}

a.nav:hover, a.clicked {
text-decoration: none;
font-style: italic;
}
Und das Script funktioniert bei mir einwandfrei, will heißen, daß der Link der aktuell geöffneten Seite kursiv ist, und es so lange bleibt, bis der nächste Link aufgerufen wird.
 
Okay, habe den Fehler entdeckt: in den Links fehlt ja noch der erforderliche Event-Handler onclick="aktivieren(this.href)" ;)
 
Ok. Jetzt klappt soweit alles. Das Problem ist nur, dass die links nicht kursiv bleiben. Habs jetzt mit Safari und Firefox probiert. Geht net. :(
 
Bitte lies meinen letzten Beitrag, den ich mit dir zeitgleich verfasst habe.
 
Status
Nicht offen für weitere Antworten.
Zurück