ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
2600
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. #1
    Sascha_77 ist offline Mitglied
    Registriert seit
    Apr 2006
    Beiträge
    14
    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
     

  2. #2
    Maik Tutorials.de Gastzugang
    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>
     

  3. #3
    Sascha_77 ist offline Mitglied
    Registriert seit
    Apr 2006
    Beiträge
    14
    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>
     

  4. #4
    Maik Tutorials.de Gastzugang
    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>
     

  5. #5
    Sascha_77 ist offline Mitglied
    Registriert seit
    Apr 2006
    Beiträge
    14
    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.
     

  6. #6
    Maik Tutorials.de Gastzugang
    Also, die Textunterstreichung kannst du selbstverständlich noch deaktivieren

    Code css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    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.
     

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

  8. #8
    Sascha_77 ist offline Mitglied
    Registriert seit
    Apr 2006
    Beiträge
    14
    Ok. Jetzt klappt soweit alles. Das Problem ist nur, dass die links nicht kursiv bleiben. Habs jetzt mit Safari und Firefox probiert. Geht net.
     

  9. #9
    Maik Tutorials.de Gastzugang
    Bitte lies meinen letzten Beitrag, den ich mit dir zeitgleich verfasst habe.
     

  10. #10
    Sascha_77 ist offline Mitglied
    Registriert seit
    Apr 2006
    Beiträge
    14
    Juhuuu. Nun macht er es so wie ich es gerne hätte. Vielen Dank.
     

  11. #11
    Maik Tutorials.de Gastzugang
    Gern geschehen
     

Ähnliche Themen

  1. Link im iframe soll id ändern
    Von hendrik87 im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 20.11.08, 08:29
  2. Antworten: 3
    Letzter Beitrag: 19.11.08, 11:23
  3. Link soll sich von alleine öffnen
    Von jackassol im Forum HTML & XHTML
    Antworten: 7
    Letzter Beitrag: 23.04.06, 18:24
  4. Inlineframe soll sich an die Seite anpassen
    Von Kyrodust im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 02.08.04, 12:56
  5. 1 link (htm seiten) soll sich in 2 iframes öffnen
    Von pipeline im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 03.03.04, 10:09