Results 1 to 2 of 2

opacity eines anderen Elements über eine OnClick Funktion ändern

  1. #1 Reply With Quote
    Kämpfer
    Join Date
    Jun 2012
    Posts
    381
    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 is offline

  2. #2 Reply With Quote
    Krieger Tiranu's Avatar
    Join Date
    Feb 2010
    Posts
    492
    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 is offline Last edited by Tiranu; 08.11.2018 at 16:25.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •