✔ aktiver Link soll erhalten bleiben ...

G

grf_yoda

Grünschnabel
Hallo zusammen,

ich möchte in einem klassischen Frameset (oben Top, links Navigation und rechts Main) erreichen, dass der aktive Link auch als solcher zu erkennen ist (bleibt) und das auch schon beim Aufruf der Seite, also dann auf dem Link "Startseite".

In dem Anhang bzw. hier ist das Problem nachvollziehbar.

Mein Problem ist, dass der aktive Link nach jedem Klick verloren geht, er soll aber aktiv sein, bis zum "echten" Klick" in der Navigation oder auf eine Link im MainFrame (und wenn dann dieser sogar noch aktiv würde, wäre ich echt begeistert, so wie hier: http://www.gesetze-im-internet.de/index.html).

Ich habe gegoogelt und hier recherchiert und habe jetzt in etwa eine Vorstellung, was ich falsch mache (Stichwort ID zuweisen?), aber ich bekomme es nicht hin.

Geht das überhaupt in einem Frameset und wenn ja, kann mir hier jemand auf die Sprünge helfen ... vielleicht sogar anhand der Anlage?

Vielen Dank im Voraus ...
ein "verzweifelter" Webseitenersteller
 

Anhänge

Hi,

in einem Frameset benötigst du für dein Vorhaben zusätzlich Javascript.

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';
                        }
                }
        }
}
CSS: 
a.nav, a.clicked {
color: #b9b9b9;
}
a.nav:hover, a.clicked {
color: #0090E0;
}
HTML: 
<ul>
    <li><a href="#link1" class="nav" onclick="aktivieren(this.href)" target="Name_des_Frames">link 1</a></li>
    <li><a href="#link2" class="nav" onclick="aktivieren(this.href)" target="Name_des_Frames">link 2</a></li>
    <li><a href="#link3" class="nav" onclick="aktivieren(this.href)" target="Name_des_Frames">link 3</a></li>
</ul>


mfg Maik
 
Hallo Maik,

danke für die superschnelle Antwort, so kenne ich das von tutorials.de ... bin ja auch schon Mitglied seit 2003. Zu meiner Schande muss ich gestehen, dass ich etwas "eingerostet" bin, was die WebSitenerstellung anbelangt. Deshalb meine Frage, könntest du mir das anhand meines Dateianhangs "verdeutlichen"?

Vielen Dank
 
navi.htm
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Navigation</title>
<style type="text/css">
body {
        scrollbar-base-color:#5C743D;
        scrollbar-3dlight-color:#D5EDB3;
        scrollbar-arrow-color:#5C743D;
        scrollbar-darkshadow-color:#999999;
        scrollbar-face-color:#D5EDB3;
        scrollbar-highlight-color:#FFFFFF;
        scrollbar-shadow-color:#CCCCCC;
        scrollbar-track-color:#F4FFE4;
        background-color: #5C743D;
        border-top-color: #5C743D;
        border-left-color: #5C743D;
        background-image: url();
        background-position: right;
        margin-left: 8px;
        margin-top: 8px;
}
#navlist {
        margin-left: 0;
        width: 195px;
        padding-top: 3px;
        padding-right: 2px;
        padding-bottom: 1;
        padding-left: 2px;
        background-color: #5C743D;
}
#navlist li {
    list-style: none;
    margin: 0;
    font-size: 1em;
}

#navlist a {
        display: block;
        text-decoration: none;
        color: #F4FFE4;
        background-color: #5C743D;
        padding-top: 0.25em;
        padding-right: 0.5em;
        padding-bottom: 0.4em;
        padding-left: 0.75em;
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #D5EDB3;
        border-bottom-color: #99CC66;
        border-right-color: #99CC66;
        border-left-color: #D5EDB3;
}
#navlist a {
    width: 99%;
/* only necessary for Internet Explorer */
}
#navlist a {
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 195px;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
#navcontainer>#navlist a {
    width: 195px;
/* only necessary if you use the hacks above for the Internet Explorer */
}
#navlist a.nav:hover, #navlist a#current:hover {
        background: #609121;
        padding: 0.4em 0.35em 0.25em 0.9em;
        border-top-color: #99CC66;
        border-bottom-color: #D5EDB3;
        border-right-color: #D5EDB3;
        border-left-color: #99CC66;
}
#navlist  a.clicked {
        background: #99CC66;
        padding: 0.4em 0.35em 0.25em 0.9em;
        border-top-color: #609121;
        border-bottom-color: #F4FFE4;
        border-right-color: #F4FFE4;
        border-left-color: #609121;
}
a:link {
        color: #F4FFE4;
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
}
a:visited {
        color: #F4FFE4;
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
}
a:hover {
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
}
</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>
<div id="navcontainer">
<ul id="navlist">
<li><a href="mainFrame.htm" target="rightFrame" onMouseOver="status=''; return true;" class="nav" onclick="aktivieren(this.href)">Startseite</a></li>
<li><a href="mich.htm" target="rightFrame" onMouseOver="status=''; return true;" class="nav" onclick="aktivieren(this.href)">über mich</a></li>
<li><a href="links.htm" target="rightFrame" onMouseOver="status=''; return true;" class="nav" onclick="aktivieren(this.href)">verschiedene Links</a></li>
<li><a href="impressum.htm" target="rightFrame" onMouseOver="status=''; return true;" class="nav" onclick="aktivieren(this.href)">Impressum</a></li>
</ul>
</div>
</body>
</html>


mfg Maik
 
Hi Maik,

vielen Dank für deine schnelle Hilfe, es funktioniert prima.

Ein nicht mehr verzweifelter Websitenersteller :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück