tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
328
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 13.03.09 23:24 #1
    grf_yoda grf_yoda ist offline Mitglied
    Registriert seit
    Jul 2003
    Ort
    Hannover
    Beiträge
    10
    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
    Angehängte Dateien Angehängte Dateien
     
    Zitieren Zitieren
  2. 13.03.09 23:28 #2
    Maik Tutorials.de Gastzugang
    Hi,

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

    Code javascript:
    1
2
3
4
5
6
7
8
9
10
11
12
13

    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';
                        }
                }
        }
}
    Code css:
    1
2
3
4
5
6

    a.nav, a.clicked {
color: #b9b9b9;
}
a.nav:hover, a.clicked {
color: #0090E0;
}
    HTML-Code:
    <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
     
    Zitieren Zitieren
  3. 13.03.09 23:51 #3
    grf_yoda grf_yoda ist offline Mitglied
    Registriert seit
    Jul 2003
    Ort
    Hannover
    Beiträge
    10
    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
     
    Zitieren Zitieren
  4. 14.03.09 00:06 #4
    Maik Tutorials.de Gastzugang
    navi.htm
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

    <!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 [b]a.nav[/b]: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  [b]a.clicked[/b] {
        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>
[b]<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>[/b]
</head>
 
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="mainFrame.htm" target="rightFrame" onMouseOver="status=''; return true;" [b]class="nav" onclick="aktivieren(this.href)"[/b]>Startseite</a></li>
<li><a href="mich.htm" target="rightFrame" onMouseOver="status=''; return true;" [b]class="nav" onclick="aktivieren(this.href)"[/b]>über mich</a></li>
<li><a href="links.htm" target="rightFrame" onMouseOver="status=''; return true;" [b]class="nav" onclick="aktivieren(this.href)"[/b]>verschiedene Links</a></li>
<li><a href="impressum.htm" target="rightFrame" onMouseOver="status=''; return true;" [b]class="nav" onclick="aktivieren(this.href)"[/b]>Impressum</a></li>
</ul>
</div>
</body>
</html>


    mfg Maik
     
    Zitieren Zitieren
  5. 14.03.09 11:44 #5
    grf_yoda grf_yoda ist offline Mitglied
    Registriert seit
    Jul 2003
    Ort
    Hannover
    Beiträge
    10
    Hi Maik,

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

    Ein nicht mehr verzweifelter Websitenersteller
     
    Zitieren Zitieren
« Javascript Width Problem | AJAX + PHP Sessions Problem »

Ähnliche Themen

  1. Aktiver Link soll angezeigt werden
    Von Despoiler im Forum CSS
    Antworten: 11
    Letzter Beitrag: 07.01.09, 19:07
  2. Rundung von Ecken bei inneren extrudieren sollen erhalten bleiben.
    Von digital art im Forum Cinema 4D
    Antworten: 5
    Letzter Beitrag: 09.10.08, 14:10
  3. Link soll im Frame aktiv bleiben
    Von keep one's head im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 14.09.04, 19:03
  4. Variablen bleiben nur auf der ersten von 3 Seiten im Textfeld erhalten
    Von boeckerl im Forum PHP
    Antworten: 4
    Letzter Beitrag: 04.08.04, 11:04
  5. Leerzeichen sollen erhalten bleiben
    Von Antastan im Forum HTML & XHTML
    Antworten: 7
    Letzter Beitrag: 11.02.03, 19:03