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.