• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

aktiver Link

K

KlTeufelchen84

Neues Mitglied
Hallöle ich mal wieder.. wie schafft man in JS dass beim öffnen einer Seite der erste Link schon als aktiviert dargestellt wird und beim anklicken der anderen Links natürlich diese als aktiv dargestellt wird?
 
Setze per JavaScript eine Klasse an den Link der dessen Style entsprechend deinen Wünschen ändert.

Code: 
<body onload="linkobjekt.className='aktiv';">

Wenn Du beim Anklicken dieses Links einen anderen darstellen willst, erstelle eine Funktion die diese Aufgabe nach o.g. Schema vornimmt.
 
Wobei man die aktive Seite lieber durch eine serverseitige Sprache abändern sollte. Denn wenn Leute kein Javascript aktiviert haben, sehen sie mit der Javascript Variante nicht welcher Link zur zeit aktiv ist.
 
Wenn Leute kein JS haben soll eine altzernative gestellt werden.. ist ne aufgabe für ein Lehrgang.. normal würde ich das net über JS machen..

wie würde so eine funktion aussehen? Ich habe es ausprobiert aber ich habe glaub ich einen totalen Denkfehler..

(HTML+CSS kann ich inzwischen, JS ist für mich absolutes Neuland also bitte Gnade walten lassen :oops:, komm mir vor wie Pik Doof bei dem Thema)
HTML: 
<!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" lang="en" xml:lang="en">

<head>

    <title> Navigationsarten
    </title>

    <style type="text/css">
        @import url(standart_java.css);
    </style>
    

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        
    <script type="text/javascript">
        function init()
        {
            document.getElementById("inhalt").style.zIndex="0";
            document.getElementById("inhalt2").style.zIndex="0";
            document.getElementById("inhalt3").style.zIndex="0";
            document.getElementById("inhalt4").style.zIndex="0";
            document.getElementById("inhalt5").style.zIndex="0";
        }

        function clickButton1()
        {
            init();
            document.getElementById("inhalt").style.zIndex="100";
        }
        
        function clickButton2()
        {
            init();
            document.getElementById("inhalt2").style.zIndex="100";
        }
        
        function clickButton3()
        {
            init();
            document.getElementById("inhalt3").style.zIndex="100";
        }        
        
        function clickButton4()
        {
            init();
            document.getElementById("inhalt4").style.zIndex="100";
        }
                
        function clickButton5()
        {
            init();
            document.getElementById("inhalt5").style.zIndex="100";
        }

    </script>
</head>

<body onload="linkobject.className='current';">
         <h1>1. Textnavigation</h1>
        
        <ul id="navi">
            <li id="button1"><a href="javascript:clickButton1()">Link1</a></li>
            <li id="button2"><a href="javascript:clickButton2()">Link2</a></li>
            <li id="button3"><a href="javascript:clickButton3()">Link3</a></li>
            <li id="button4"><a href="javascript:clickButton4()">Link4</a></li>
            <li id="button5"><a href="javascript:clickButton5()">Link5</a></li>
        </ul>
        
        <div >
            <p id="inhalt">
            Weit hinten, hinter den Wortbergen, fern der L&auml;nder Vokalien und 
            Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen 
            an der K&uuml;ste des Semantik, eines gro&szlig;en Sprachozeans. Ein kleines 
            B&auml;chlein namens Duden flie&szlig;t durch ihren Ort und versorgt sie mit 
            den n&ouml;tigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem 
            gebratene Satzteile in den Mund fliegen.
            </p>
        
            <p id="inhalt2">
            Nicht einmal von der allm&auml;chtigen Interpunktion werden die 
            Blindtexte beherrscht &minus; ein geradezu unorthographisches Leben. 
            Eines Tages aber beschlo&szlig; eine kleine Zeile Blindtext, ihr Name 
            war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro&szlig;e 
            Oxmox riet ihr davon ab, da es dort wimmele von b&ouml;sen Kommata, 
            wilden Fragezeichen und hinterh&auml;ltigen Semikoli, doch das Blindtextchen 
            lie&szlig; sich nicht beirren.
            </p>
        
            <p id="inhalt3">
            Es packte seine sieben Versalien, schob sich sein Initial in den 
            G&uuml;rtel und machte sich auf den Weg. Als es die ersten H&uuml;gel 
            des Kursivgebirges erklommen hatte, warf es einen letzten Blick zur&uuml;ck 
            auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von 
            Alphabetdorf und die Subline seiner eigenen Stra&szlig;e, der Zeilengasse.
            </p>
        
            <p id="inhalt4">
            Wehm&uuml;tig lief ihm eine rethorische Frage &uuml;ber die Wange, 
            dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy 
            warnte das Blindtextchen, da, wo sie herk&auml;me w&auml;re sie zigmal 
            umgeschrieben worden und alles, was von ihrem Ursprung noch &uuml;brig 
            w&auml;re, sei das Wort "und" und das Blindtextchen solle umkehren und 
            wieder in sein eigenes, sicheres Land zur&uuml;ckkehren.
            </p>
        
            <p id="inhalt5">
            Doch alles Gutzureden konnte es nicht &uuml;berzeugen und so dauerte 
            es nicht lange, bis ihm ein paar heimt&uuml;ckische Werbetexter auflauerten, 
            es mit Longe und Parole betrunken machten und es dann in ihre Agentur 
            schleppten, wo sie es f&uuml;r ihre Projekte wieder und wieder mi&szlig;brauchten. 
            Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.
            </p>
        </div>
</body>

</html>
 
Zuletzt bearbeitet:
Diese ganzen Funktionen sind im Grunde überflüssig, wenn du einfach nur ClickButton() verwendest und einen Parameter übergibst.
Ich würde dir auch PHP empfehlen. Meine Seite zum Beispiel basiert auf AJAX, aber alles funktioniert auch ohne JS mittels PHP, so als anführendes Beispiel.
Ich sehe da aber auch keine andere Möglichkeit als den className des jeweiligen Links anzupassen.

HTML: 
<script type="text/javascript">
<!-- // <<< Das da, damit, falls ein User JavaScript nicht unterstützt, der Browser diesen Teil als Kommentar ansieht und nicht ausgibt.
  function ChangeClass( object, destClass ) {
    object.className = destClass;
  }
-->
</script>

Dann passt du deine onclick-Funktion wie folgt an:
HTML: 
<script type="text/javascript">
<!--
  function clickButton( button, content ) {
    init( );
    document.getElementById( content ).style.zIndex = "0";
    button.className = "aktiv";
  }
-->
</script>

In deiner init-Funktion setzt du dann jeden className der Links entweder auf etwas anderes oder entfernst ihn gänzlich.

!!! Ungetestetes Script !!!
Wenn es nicht funktioniert, probier einfach rum... ;) Sollte so ähnlich klappen.

Zur Alternative: Da musst du wohl oder übel die Seite neu laden und über PHP manipulieren... So mache ich das auf meiner Homepage auch. ^^
 
DarkDragon193 schrieb:
Diese ganzen Funktionen sind im Grunde überflüssig, wenn du einfach nur ClickButton() verwendest und einen Parameter übergibst.
Ich würde dir auch PHP empfehlen. Meine Seite zum Beispiel basiert auf AJAX, aber alles funktioniert auch ohne JS mittels PHP, so als anführendes Beispiel.
Ich sehe da aber auch keine andere Möglichkeit als den className des jeweiligen Links anzupassen.

HTML: 
<script type="text/javascript">
<!-- // <<< Das da, damit, falls ein User JavaScript nicht unterstützt, der Browser diesen Teil als Kommentar ansieht und nicht ausgibt.
  function ChangeClass( object, destClass ) {
    object.className = destClass;
  }
-->
</script>
Dann passt du deine onclick-Funktion wie folgt an:
HTML: 
<script type="text/javascript">
<!--
  function clickButton( button, content ) {
    init( );
    document.getElementById( content ).style.zIndex = "0";
    button.className = "aktiv";
  }
-->
</script>
In deiner init-Funktion setzt du dann jeden className der Links entweder auf etwas anderes oder entfernst ihn gänzlich.

!!! Ungetestetes Script !!!
Wenn es nicht funktioniert, probier einfach rum... ;) Sollte so ähnlich klappen.

Zur Alternative: Da musst du wohl oder übel die Seite neu laden und über PHP manipulieren... So mache ich das auf meiner Homepage auch. ^^
Zum Vergrößern anklicken....

Ich danke dir.. nach langem hin und her habe ich es aber dennoch mit JavaScript hinbekommen.. Beim normalen Programmieren hätte ich es auch anders gemacht, doch diese Aufgabe war zur Übung für ein Kurs, ansonsten würde ich ne Navi nicht unbedingt über Java machen...
 
KlTeufelchen84 schrieb:
Ich danke dir.. nach langem hin und her habe ich es aber dennoch mit JavaScript hinbekommen.. Beim normalen Programmieren hätte ich es auch anders gemacht, doch diese Aufgabe war zur Übung für ein Kurs, ansonsten würde ich ne Navi nicht unbedingt über Java machen...
Zum Vergrößern anklicken....
Kein Problem, dafür sind wir ja hier.

mermshaus schrieb:
Java ist nicht JavaScript.

Gerade ein schönes Zitat dazu gefunden:
Der Unterschied ist so gross wie zwischen Haus abreissen und Frühstücken.
Zum Vergrößern anklicken....
Zum Vergrößern anklicken....
Wow, das ist ein echt schönes Zitat! Das merke ich mir. :D
 
Noch eine kurze Frage

Erstmal noch Danke für die Lösung.. Ist klar das dieses Forum dafür da ist, doch finde ich es super, wenn einem geholfen wird :-D
Danke, Danke, Danke, Danke, Danke, Danke, Danke, Danke und nochmal Danke :lol:

Ich habe noch eine kleine Frage:
Kann man über JS noch CSS einfügen?
Ich habe einmal die CSS-Anweisungen position und height die nur bei JavaScript genutzt werden soll, wenn dieser deaktiviert ist, sollen diese Anweisungen wegfallen..
 
KlTeufelchen84 schrieb:
Erstmal noch Danke für die Lösung.. Ist klar das dieses Forum dafür da ist, doch finde ich es super, wenn einem geholfen wird :-D
Danke, Danke, Danke, Danke, Danke, Danke, Danke, Danke und nochmal Danke :lol:

Ich habe noch eine kleine Frage:
Kann man über JS noch CSS einfügen?
Ich habe einmal die CSS-Anweisungen position und height die nur bei JavaScript genutzt werden soll, wenn dieser deaktiviert ist, sollen diese Anweisungen wegfallen..
Zum Vergrößern anklicken....

Ja das funktioniert. Zunächst einmal musst du dir das Element holen. Zum beispiel über document.getElementById(), dieses element hat das attribut style. und style hat wiederrum alle css einstellungen. Der unterschied ist, dass diese CSS-Attribute nicht mit - getrennt werden können wiezum beispiel z-index, sondern diese dann in Kamelschreibweise geschrieben werden. Mal ein Beispiel um den Hintergrund (background-color in CSS) eines Elementes zu ändern.
Code: 
document.getElementById("meinElement").style.backgroundColor = "red";

Hoffe das hilft dir weiter :)
 
Ja im Grunde hab ich es mir schon gedacht nur funktioniert es nicht bei mir. Mein Code:

Code: 
document.getElementById("inhalt").style.position = "absolute";
document.getElementById("inhalt2").style.position = "absolute";

Muss da nicht eine Funktion noch dazu hin oder irgendwas?
Er fühlt sich nicht angesprochen.. (Kommt in den Code auf der ersten Seite)
 
Ich hätte da noch einen kleinen Tipp, was CSS über JavaScript betrifft:
Wenn das CSS über eine externe Datei eingebunden wurde, hilft dir das style-Attribut nicht weiter. Stattdessen gibt es (je nach Browser) das Attribut-Array currentStyle[] eines jeden Elementes oder document.defaultView.getComputedStyle( element, "").getPropertyValue( StyleSheet );
 
Ich hätte da noch eine Anmerkung bezüglich des Änderns der CSS Eigenschaften eines Elementes per JS. Sollte es beim Ändern der Position bleiben mag es ok sein, auf das Style-Attribut zuzugreifen. Um den Style jedoch von außen wartbar zu machen, sollte man aber eher dem Element einen CSS-Klassennamen hinzufügen oder den Alten abändern.
Sollte man dafür kein Framework wie JQuery nutzen ist das hinzufügen ein Klasse zwar leicht, jedoch das entfernen ein wenig schwerer, da man immer damit rechnen sollte, dass das Element mehr als eine CSS-Klasse hat.
Ich zeige mal eben das hinzufügen:
Code: 
function addCssClass(element, neueKlasse) {
  element.className += " "+neueKlasse;
}

addCssClass(document.getElementById("meinElement"), "rahmenText");


---
Edit:

Hab mich grade mal an einer removeCssClass probiert. Funktionert, aber bestimmt gibt es eine einfachere Methode:
Code: 
function removeCssClass(element, deleteClass) {
    var classes = element.className;
    classes = classes.split(" ");
    for(var i=0; i < classes.length; i++) { classes[i] = classes[i].replace(new RegExp("^"+deleteClass+"$"), ""); if(classes[i] == "") classes.splice(i,1); }
    element.className = classes.join(" ");
}
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben