✔ Aktiver Link

Status
Nicht offen für weitere Antworten.
E

exhubiranta

Mitglied
Hallo,

ich beziehe mich auf dieses Thema:
http://www.tutorials.de/forum/css/245448-aktiver-link.html

Ich möchte, dass der aktive Link im Menü (während man auf der entsprechenden Seite) in einer anderen Farbe bleibt.

Ich suche schon lange nach einer Lösung, habe aber noch nichts gefunden, was funktioniert. Diese Lösung scheint mir praktikabel, aber mit meinen wenigen Kenntnissen kann ich das nicht für meine Zwecke umprogrammieren, vor allem möchte ich auf dieses <ul> und <li> verzichten.

Mein css sieht so aus
Code: 
a:link, a:visited { color: black; text-decoration: none }
a:active { color: red; text-decoration: none }
a:hover { color: red; text-decoration: none }

Meine Navi ist ein include und sieht im body-Bereich so aus:

HTML: 
<body bgcolor="#313490">
		<div align="left">
			<table width="1024" border="0" cellspacing="0" cellpadding="0" bgcolor="#313490">
				<tr height="40">
					<td valign="bottom" height="40">
						<div align="center">
							<a href="index.php" target="_top">Startseite</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="galerie.php">Galerie</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="gaestebuch.php" target="_top">G&auml;stebuch</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="kontaktimpress.php" id="active" target="_top">Impressum</a></div>
					</td>
				</tr>
			</table>
		</div>
	</body>

Kann man den Code von Maik umschreiben und wie? Danke schon mal.


Code: 
ul#nav li a:link, ul#nav li a:visited { }

ul#nav li a:link#active, ul#nav li a:visited#active { }

ul#nav li a:hover { }


HTML: 
<ul id="nav">
    <li><a href="#" id="active">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
</ul>
 
Hi,

nimm die ID #active (wie im Impressum-Link genannt) im farblich entsprechenden Selektor auf:

Code: 
a:link, a:visited { color: black; text-decoration: none }
a:hover, a:active, a:link#active, a:visited#active { color: red; text-decoration: none }
Und falls der aktive Link eine andere Farbe besitzen soll:

Code: 
a:link, a:visited { color: black; text-decoration: none }
a:hover, a:active { color: red; text-decoration: none }
a:link#active, a:visited#active { color: yellow; text-decoration: none }
Im übrigen wird die :active-Pseudoklasse nach der :hover-Pseudoklasse genannt. Oder ist es dir schon mal gelungen, einen Link anzuklicken, ohne zuvor mit der Maus über ihn zu fahren?

mfg Maik
 
Hi,

Du musst einfach nur dem Link, der gerade aktiv ist, eine id geben, z.B. "aktiv" und in Deinem Stylesheet entsprechend formatieren:

CSS: 
a:active, a:link#aktiv, a:visited#aktiv { color: red; text-decoration: none }

LG

EDIT: Du bist einfach zu schnell, Maik :)
 
Ach ich bin so doof! Das ist ja völlig falsch. Die navi ist ja ein include, d.h. sie muss immer gleich bleiben. Das nützt nichts, wenn ich bei einem Link ein active setze, weil er das bei den anderen Seiten auch so macht. Es ist wie bei einem frame. Auf anderen Seiten habe ich immer ganz komplizierte Javascript-Codes ect. gesehen, die aber bei mir nie funktioniert haben. Wisst ihr Hilfe?
 
Wenn es mit diesem JS auch nicht funktioniert, weil das Dokument nach einem Klick auf einen Link neu geladen wird:

Code: 
<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>
Code: 
<a href="#link1" class="nav" onclick="aktivieren(this.href)">link 1</a>
<a href="#link2" class="nav" onclick="aktivieren(this.href)">link 2</a>
<a href="#link3" class="nav" onclick="aktivieren(this.href)">link 3</a>
Code: 
<style type="text/css">
<!--
a.nav, a.clicked {
color: #b9b9b9;
}

a.nav:hover, a.clicked {
color: #0090E0;
}
-->
</style>

wirst du das wohl mit PHP lösen müssen, um den aktiven Link mit der entsprechenden Klasse (hier: .current) auszuzeichnen.

Im nachfolgenden Beispiel werden die Verweisziele in das Hauptdokument "index.php" geladen, und der "aktive" Link erhält die Klasse .current.

Including-Script:

PHP: 
<?php
if (!empty($_GET['section']))
    {
        $section=$_GET['section'];
        if ((strpos($section,"index")>-1) || (strpos($section,"http:")>-1) || (strpos($section,"https:")>-1) || (strpos($section,"ftp:")>-1))
            {
                header("Location:index.php");
            }
        else
            {
                include('inc/'.$section.".php");
            }
    }
else
    {
        include("inc/start.php");
    }

?>
Navi-Script:

PHP: 
<?php
$entries=array('start','galerie','gaestebuch','impressum');
if (isset($_GET['section']))
    {
        $section=$_GET['section'];
    }
else
    {
        $section='start';
    }
$styles=array();
for ($x=0;$x<count($entries);$x++)
    {
        if ($entries[$x]==$section)
            {
                $styles[$entries[$x]]='current';
            }
        else
            {
                $styles[$entries[$x]]='normal';
            }
    }
?>
<a href="index.php?section=start" class="<?php echo $styles['start']; ?>">Startseite</a>
<a href="index.php?section=galerie" class="<?php echo $styles['galerie']; ?>">Galerie</a>
<a href="index.php?section=gaestebuch" class="<?php echo $styles['gaestebuch']; ?>">Gaestebuch</a>
<a href="index.php?section=impressum" class="<?php echo $styles['impressum']; ?>">Impressum</a>
Stylessheet:

Code: 
a.normal { }
a.current { }
mfg Maik
 
Okay ich probiers, obwohl deine erste Zeile nichts Gutes verheißt...

Aber ich verstehe ich nicht ganz, wohin die 5 ersten Codes von dir genau hinsollen. Die ersten drei Codes stecke ich jeweils in die php-Seiten mit den Inhalten? Aber das geht nicht, weil letzterer Code sich ja schon auf die Navi bezieht und die ist ja nicht als Code enthalten, sondern als include.

Code: 
<html>
<head>
<style type="text/css">
<!--
a.nav, a.clicked {
color: #b9b9b9;
}

a.nav:hover, a.clicked {
color: #0090E0;
}
-->
</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 bgcolor="#ffffff">
		<div align="center">
			<table class="100height" width="1024" border="0" cellspacing="0" cellpadding="0" bgcolor="#313490" height="100%">
				<tr height="217">
					<td height="217" bgcolor="silver"></td>
				</tr>
				<tr height="40">
					<td valign="top" height="40">
						<div align="left">
							<?php include("navi.php");?></div>
					</td>
				</tr>
				<tr height="100%">
					<td class="100height" height="100%">
						<div align="center">
							
						</div>
					</td>
				</tr>
			</table>
		</div>
		<p></p>
	</body>

</html>

Muss ich den dritten Code schon in die navi.php stecken? Das ist ja gleichzeitig die Navi und das Include. Vielleicht komm ich auch mit den Begriffen durcheinander. Mit dem 5. Code weiß ich gar nicht wohin ich hin soll. Ich habe ihn da in der navi.php weggelassen:

Code: 
<?php
if (!empty($_GET['section']))
    {
        $section=$_GET['section'];
        if ((strpos($section,"index")>-1) || (strpos($section,"http:")>-1) || (strpos($section,"https:")>-1) || (strpos($section,"ftp:")>-1))
            {
                header("Location:index.php");
            }
        else
            {
                include('inc/'.$section.".php");
            }
    }
else
    {
        include("inc/start.php");
    }

?> 

<html>

	<head>
	</head>
<body bgcolor="#313490">
		<div align="left">
			<table width="1024" border="0" cellspacing="0" cellpadding="0" bgcolor="#313490">
				<tr height="40">
					<td valign="bottom" height="40">
						<div align="center">
							<a href="#link1" class="nav" onclick="aktivieren(this.href)">Startseite</a>&nbsp;&nbsp<a href="#link2" class="nav" onclick="aktivieren(this.href)">Galerie</a>&nbsp;&nbsp;<a href="#link3" class="nav" onclick="aktivieren(this.href)">G&auml;stebuch</a></div>
					</td>
				</tr>
			</table>
		</div>
	</body>

</html>

Kannst du bitte weiter dran bleiben? Ich geh' zwar gleich ins Bett, bin hundemüde, aber morgen ist ja auch noch ein Tag. Danke schon mal soweit.

Viele Grüße und gute Nacht
exi
 
Die ersten drei Code-Blöcke haben mit denen nach meiner Aussage
wirst du das wohl mit PHP lösen müssen, um den aktiven Link mit der entsprechenden Klasse (hier: .current) auszuzeichnen.
Zum Vergrößern anklicken....
nichts zu tun, denn das erste Beispiel basiert auf Javascript, und das zweite auf PHP.

mfg Maik
 
Hallo,

warum machst du das nicht so wie in HIGHLIGHTING CURRENT PAGE WITH CSS (Gumbos Link im oben zitierten Thread):
Code: 
/* CSS: */
a:link, a:visited { color: black; text-decoration: none }
a:hover { color: red; text-decoration: none }
a:active { color: red; text-decoration: none }

body#start a#startnav,
body#gal a#galnav,
body#gaeste a#gaestenav,
body#impr a#imprnav {
	color: red;
}
HTML: 
<body id="impr">
<div style="text-align:center;background-color:#ccf;">
   <a href="index.php" id="startnav">Startseite</a>
   &nbsp;|&nbsp;
   <a href="galerie.php" id="galnav">Galerie</a>
   &nbsp;|&nbsp;
   <a href="gaestebuch.php" id="gaestenav">G&auml;stebuch</a>
   &nbsp;|&nbsp;
   <a href="kontaktimpress.php" id="imprnav">Impressum</a>
</div>
</body>
Du musst dann nur noch dem BODY-Element der Seite die entsprechende ID verpassen.
 
Hallo Hela,

deine Lösung geht nicht, denn dafür müsste ich soviele Navi.phps anlegen wie Seiten. Ich will ja nur eine Navi.php haben, sonst bräuchte ich kein include und könnte die Navi gleich in jede Seite direkt einbinden. Aber ich will ja bei Änderungen der Navi nur einmal ranmüssen und nicht alle Seiten ändern.

Ich probier die Lösung von Maik.

Viele Grüße
exi
 
Hallo Maik,

ach so. Kann dann folgern, dass die php-Lösung eher funktionieren würde, weil du schriebst "Wenn es mit diesem JS auch nicht funktioniert, weil das Dokument nach einem Klick auf einen Link neu geladen wird" ?

Ich werde mich auf die php-Lösung konzentrieren.

Bis demnächst
exi
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück