Ergebnis 1 bis 2 von 2

opacity eines anderen Elements über eine OnClick Funktion ändern

  1. #1 Zitieren
    Veteran
    Registriert seit
    Jun 2012
    Beiträge
    630
    Ich habe oben auf einer HTML Seite zwei Links.
    (Könnte sie theoretisch auch gegen Buttons austauschen, wenns geht, will ich sie aber behalten.)

    Kann ich mit JavaScript nun eine Funktion machen, dass, wenn einer der Links geklickt wird,
    die Opacity z.B. eines Divs mitten auf der Seite, die bis hier 0 war, dann auf 1 gesetzt wird?

    Wie genau muss die Syntax der Funktion und der Elementnamen sein?

    Die Links z.b. können ja über zwei verschiedene Namen in CSS ausgewählt werden,
    sie fallen einmal unter "#navigation" und gleichtzeitig unter "#list1" und "#list2" (in diesem Fall).

    Wie muss ich die Links in der OnClick-Funktion nennen?

    (z.b. sowas: OnClick="klickFunction(this)"
    und dann function klickFunction(thisUse){
    thisUse.style.anderesDiv.Opacity=1;
    }


    ODER SO
    Gothicforum ist offline

  2. #2 Zitieren
    Veteran Avatar von Tiranu
    Registriert seit
    Feb 2010
    Beiträge
    500
    Ich hoffe, ich habe dich richtig verstanden.

    Wenn du nur ein Div hast, das du ein oder ausblenden willst, kannst du das hardcoden. Wenn aber jeder Link für ein seperates Div zuständig ist, solltest du in dem Link-Tag definieren, welches Div das ist. Dafür kannst du z.B. das href-Attribut verwenden, wenn du eh zum Div scrollen willst. Oder ein data-Attribut. z.B.:

    Code:
    <a href="#" data-target="myTargetDivId">Link</a>

    Dieses Attribut kannst du dann im Klick-Event auslesen, dir das dazu gehörige Div suchen und dann damit machen, was du willst.

    Hier ein Beispiel auf jsFiddle: https://jsfiddle.net/73fpu1rd/2/

    HTML:
    Code:
    <nav id="navigation">
      <ul>
        <li><a href="#target-1">Link 1</a></li>
        <li><a href="#target-2">Link 2</a></li>
        <li><a href="#target-3">Link 3</a></li>
      </ul>
    </nav>
    
     
    <div class="target" id="target-1">DIV 1</div>
    <div class="target" id="target-2">DIV 2</div>
    <div class="target" id="target-3">DIV 3</div>

    CSS:
    Code:
    .target {
      opacity: 0;
    }

    JavaScript:
    Code:
    const navigation = document.getElementById('navigation');
    navigation.addEventListener('click', clickHandler);
    
    let lastTarget = null;
    
    function clickHandler(event) {
      if (event.target.hasAttribute('href')) {
        const href = event.target.getAttribute('href'); 
        const targetId = href.substring(1);
        
        if (lastTarget) {
          lastTarget.style.opacity = 0;
        }
        
        const target = document.getElementById(targetId);
        if (target) {
          target.style.opacity = 1;
          lastTarget = target;
        }
      }
    }

    Wenn du nicht willst, dass die ausgeblendeten Divs Platz auf der Seite beanspruchen, solltest du "display: none" statt "opacity: 0" verwenden.
    Tiranu ist offline Geändert von Tiranu (08.11.2018 um 16:25 Uhr)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •