mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Mo 02.10.2023 23:07 Benutzername: Passwort: Auto-Login

Thema: [Javascript] Hover und Aktiv Script vom 17.01.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [Javascript] Hover und Aktiv Script
Autor Nachricht
Anti78
Threadersteller

Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 45
Geschlecht: Männlich
Verfasst Di 17.01.2012 15:55
Titel

[Javascript] Hover und Aktiv Script

 Antworten mit Zitat Zum Seitenanfang
Hi zusammen.

Ich bastel gerade an eine Webseite, bei der ich links ein Menü habe über das rechts in ein iFrame (geht leider nicht anders) Inhalt aufgerufen wird.
Natürlich soll links der jeweilige aktive Link hervorgehoben werden. Das habe ich darüber gelöst.

JavaScript
Code:
<script type="text/javascript">
function go(ob) {
   obmain = document.getElementById('main');
   for (var i = 0; i < obmain.getElementsByTagName("li").length; i++) {
      obmain.getElementsByTagName("li")[i].firstChild.style.color = "#aaaaaa";
   }
   ob.style.color = "#000000";
}
</script>


HTML
Code:
<a href="hier der inhalt" target="iframe" onclick="go(this);">Alles</a>


Funktioniert soweit auch.

Aber leider funktioniert dann der "Hover"-Effekt der Textlinks nicht mehr, der für "a href" festgelegt ist.

Deswegen habe ich folgende Funktionen dazu geschrieben.

JavaScript
Code:
function hoverMe(element) {
   element.style.color = "#000000";
   }
   
function outMe(element) {
   element.style.color = "#aaaaaa";
   }


HTML
Code:
<a href="hier der inhalt" target="iframe" onclick="go(this);" onmouseover="hoverMe(this)" onmouseout="outMe(this)">Alles</a>


Das mit dem Hover funktioniert jetzt auch. Aber leider funktioniert jetzt nicht mehr, dass der Link aktiv bleibt, wenn man geklickt hat. Wie bekomme ich alles zum funktionieren?

Leider bin ich nicht so fit in JS. Wäre super, wenn mir da jemand weiter helfen könnte.

Danke.
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 57
Geschlecht: Männlich
Verfasst Di 17.01.2012 16:00
Titel

Antworten mit Zitat Zum Seitenanfang
Weise dem Element eine Klasse zu und ändere nicht direkt den style. Die zugewiesene Klasse kann wiederum eine :hover Deklaration haben.

Gruß
Karl
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Anti78
Threadersteller

Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 45
Geschlecht: Männlich
Verfasst Di 17.01.2012 16:02
Titel

Antworten mit Zitat Zum Seitenanfang
Wie muss ich das schreibe? Im css habe ich ja schon die passende Klassen. Aber wie muss ich das im JS eintragen?
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 57
Geschlecht: Männlich
Verfasst Di 17.01.2012 16:20
Titel

Antworten mit Zitat Zum Seitenanfang
Ist das so schwer?

Gruß
Karl
  View user's profile Private Nachricht senden
Anti78
Threadersteller

Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 45
Geschlecht: Männlich
Verfasst Di 17.01.2012 16:33
Titel

Antworten mit Zitat Zum Seitenanfang
Jepp. Ist es. Wenn man nicht genau weiß, wonach man suchen muss. Und auch das einbinden der Klasse in das JS von mir steht so nicht wirklich im Netz. Jedenfalls habe ich es nicht gefunden. Das Grundproblem, dass der Link markiert bleibt nach Klick bleibt bestehen.
  View user's profile Private Nachricht senden
WebRex

Dabei seit: 26.07.2011
Ort: -
Alter: 28
Geschlecht: Männlich
Verfasst Di 17.01.2012 21:31
Titel

Antworten mit Zitat Zum Seitenanfang
Verwende ein Framework wie jQuery - Spart Zeit und Nerven. * Ja, ja, ja... *

Code:
<!DOCTYPE html>
<html>
    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
          $('ul#main li a').click(function() {
             // tritt das Klick-Event bei einem
            // anchor in einem li im ul#main auf,
            // dann wird dieser Code hier ausgeführt
            
            // zuerst mal allen links den Inhalt des class-Atributes wegnehmen
            // es darf ja immerhin nur ein aktiver Link vorkommen
            $('ul#main li a').attr('class', '');
            
            // nun dem geklickten Anchor (mit this referenziert) die class zuweisen
            $(this).attr('class', 'clickedLink');
            });         
      </script>
   </head>
   <body>
       <ul id="main">
          <li><a href="">Seite 1</a></li>
          <li><a href="">Seite 2</a></li>
      </ul>
       <iframe src="foo"></iframe>
   </body>
</html>


Zuletzt bearbeitet von WebRex am Di 17.01.2012 21:33, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Struwwelpeter

Dabei seit: 25.08.2005
Ort: Stuttgart
Alter: 36
Geschlecht: Männlich
Verfasst Di 17.01.2012 23:10
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
<script type="text/javascript">
    $(function() {
        $('ul#main li a').click(function() {
            $('.active').removeClass('active');
            $(this).addClass('active');
        });
     });         
</script>

Eher noch so, wie man auch spätestens im dritten Ergebniss nach Karlarschs Link sieht.
WebRex hat geschrieben:
$('ul#main li a').attr('class', '');

Soll durchaus vorkommen, dass mehr als eine Klasse genutzt wird.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Javascript: Ebene onLoad aktiv setzen
[JavaScript] Accordion-Effekt mit Aktiv-Zustand versehen
hover effekt über bild - ajax, javascript?
Javascript / jQuery: Menü mit Hover bzw. Touch-Events
Javascript MouseOver Script
[Javascript] Diashow script
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB