Link soll sich bei offener Seite ändern @ HTML & XHTML - tutorials.de: Tutorial, Forum, Anleitung & Hilfe

**Sascha_77** · 15.04.06 11:00

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

Maik · 15.04.06 11:11

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

HTML-Code:

<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-Code:

<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>

**Sascha_77** · 15.04.06 11:31

Danke für die schnelle antwort. Aber irgendwie krieg ich das nicht ganz hin. Ich häng mal den Quelltext hintendran:

HTML-Code:

<?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>

Maik · 15.04.06 11:40

Probiere es mal mit diesem Quelltext:

HTML-Code:

<?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>

**Sascha_77** · 15.04.06 11:46

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.

Maik · 15.04.06 11:51

Also, die Textunterstreichung kannst du selbstverständlich noch deaktivieren

Code 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.

Maik · 15.04.06 12:02

Okay, habe den Fehler entdeckt: in den Links fehlt ja noch der erforderliche Event-Handler onclick="aktivieren(this.href)"

**Sascha_77** · 15.04.06 12:02

Ok. Jetzt klappt soweit alles. Das Problem ist nur, dass die links nicht kursiv bleiben. Habs jetzt mit Safari und Firefox probiert. Geht net.

Maik · 15.04.06 12:05

Bitte lies meinen letzten Beitrag, den ich mit dir zeitgleich verfasst habe.

**Sascha_77** · 15.04.06 12:06

Juhuuu. Nun macht er es so wie ich es gerne hätte. Vielen Dank.

Maik · 15.04.06 12:08

Gern geschehen

tut orials.de	tut informieren	tut dir helfen	tut kooperieren
©2000-2013 tutorials.de Alle Rechte vorbehalten	» Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials » Terrashop

Themen-Optionen

Thema durchsuchen

Anzeige

Ähnliche Themen

Link im iframe soll id ändern

Tabellen Hintergrund Farbe soll sich ändern nicht der Hintergrund der Seite !

Link soll sich von alleine öffnen

Inlineframe soll sich an die Seite anpassen

1 link (htm seiten) soll sich in 2 iframes öffnen

E-Mail:
Abonnieren Abbestellen