Howto machen ein div erscheinen, wenn Sie auf Link in der Navigation klicken

Question

Okay, ich komme aus Holland, also entschuldige mein schlechtes Englisch. Ich werde versuchen, so genau wie möglich sein ....

Tor

eine Navigationsleiste hat, und wenn sie auf einem Einzelteil geklickt wird es ein div mit Inhalt darin zeigen.

in Ordnung, zu Testzwecken habe ich eine einfache jsfiddle gemacht haben https://jsfiddle.net/hjuekLhq/

[HTML]

<nav class="navigation"> 
     <ul> 
     <li class="item1"><a href="#content1">content1</a></li> 
     <li class="item2"><a href="#content2">content2</a></li> 
     <li class="item3"><a href="#content3">content3</a></li> 
     </ul> 
    </nav> 
<div id="content1">content 1 text</div> 
<div id="content2">content 2 text</div> 
<div id="content3">content 3 text</div> 

[CSS]

.navigation {background:blue;width:100%;} 
.navigation li {display:inline-block;width: 5em;background:white;color:black;padding:1em;} 
.navigation a {text-decoration:none;} 

#content1 {background:green;color:white;padding:5em;} 
#content2 {background:orange;color:white;padding:5em;} 
#content3 {background:black;color:white;padding:5em;} 

#content1 {display:block;} 
#content2 {display:none;} 
#content3 {display:none;} 

.item1:hover #content1 {display:block;} 
.item1:hover #content2 {display:none;} 
.item1:hover #content3 {display:none;} 

.item2:hover #content1 {display:none;} 
.item2:hover #content2 {display:block;} 
.item2:hover #content3 {display:none;} 

.item3:hover #content1 {display:none;} 
.item3:hover #content2 {display:none;} 
.item3:hover #content3 {display:block;} 

Die obige Geige ist das, was ich will, und funktioniert nicht ...

Folgendes Geige ist ein funktionierendes Beispiel, aber es zeigt nicht die gewünschte Navbar.

https://jsfiddle.net/o883h71u/

[HTML]

<li class="item1"><a href="#content1">content1</a></li> 
    <li class="item2"><a href="#content2">content2</a></li> 
    <li class="item3"><a href="#content3">content3</a></li> 

<div id="content1">content 1 text</div> 
<div id="content2">content 2 text</div> 
<div id="content3">content 3 text</div> 

[CSS]

.item1, .item2, .item3 {display:inline-block;width: 5em;background:white;color:black;padding:1em;} 
.item1 a, .item2 a, .item3 a {text-decoration:none;} 

#content1 {background:green;color:white;padding:5em;} 
#content2 {background:orange;color:white;padding:5em;} 
#content3 {background:black;color:white;padding:5em;} 

#content1 {display:block;} 
#content2 {display:none;} 
#content3 {display:none;} 

.item1:hover ~#content1 {display:block;} 
.item1:hover ~#content2 {display:none;} 
.item1:hover ~#content3 {display:none;} 

.item2:hover ~#content1 {display:none;} 
.item2:hover ~#content2 {display:block;} 
.item2:hover ~#content3 {display:none;} 

.item3:hover ~#content1 {display:none;} 
.item3:hover ~#content2 {display:none;} 
.item3:hover ~#content3 {display:block;} 

Ich hoffe, dass ich klar genug auf das, was ich hier erreichen wollen. Wenn ein Menüeintrag angeklickt wird, sollte ein div erscheinen und die anderen divs sollten verschwinden.

Jede Hilfe würde sehr geschätzt werden! Oh ja, und wenn möglich nur CSS! kein Javascript ...

Danke!

Answer 1

Kann dies Ihr Problem zu lösen helfen könnte ...

versuchen, auf den Registerkarten des Menüs klicken

[codepan link here] 

http://codepen.io/amiteshchauhan/pen/oxaBPG

Answer 2

Wir müssen js für jede Ereignisaktion aufrufen. und unten ist der Code zum Anzeigen der Registerkarte.

$('.navigationcontainer').addClass('hide'); 
 
$('.navigationcontainer').eq(0).removeClass('hide'); 
 
$('.navigation li').eq(0).find('a').addClass('active'); 
 
$('.navigation a').click(function(e){ 
 
    e.preventDefault() 
 
    $('.navigation a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    var id = $(this).attr('href'); 
 
    $(id).removeClass('hide').siblings('div').addClass('hide'); 
 
})

.navigation {background:blue;width:100%;} 
 
.navigation li {display:inline-block;width: 5em;background:white;color:black;padding:1em;} 
 
.navigation a {text-decoration:none;} 
 
.navigation a.active{background:red;} 
 

 
#content1 {background:green;color:white;padding:5em;} 
 
#content2 {background:orange;color:white;padding:5em;} 
 
#content3 {background:black;color:white;padding:5em;} 
 

 
.navigationcontainer.hide{display:none;} 
 

 
.item1:hover #content1 {display:block;} 
 
.item1:hover #content2 {display:none;} 
 
.item1:hover #content3 {display:none;} 
 

 
.item2:hover #content1 {display:none;} 
 
.item2:hover #content2 {display:block;} 
 
.item2:hover #content3 {display:none;} 
 

 
.item3:hover #content1 {display:none;} 
 
.item3:hover #content2 {display:none;} 
 
.item3:hover #content3 {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navigation"> 
 
     <ul> 
 
     <li class="item1"><a href="#content1">content1</a></li> 
 
     <li class="item2"><a href="#content2">content2</a></li> 
 
     <li class="item3"><a href="#content3">content3</a></li> 
 
     </ul> 
 
    </nav> 
 
<div class="navigationwrapper"> 
 
<div id="content1" class="navigationcontainer">content 1 text</div> 
 
<div id="content2" class="navigationcontainer">content 2 text</div> 
 
<div id="content3" class="navigationcontainer">content 3 text</div> 
 
    </div>

Answer 3

Hier ist der Code mit CSS.

.navigation {background:blue;width:100%;} 
 
.navigation li {display:inline-block;width: 5em;background:white;color:black;padding:1em;} 
 
.navigation a {text-decoration:none;} 
 
.navigation a.active{background:red;} 
 

 
#content1 {background:green;color:white;padding:5em;} 
 
#content2 {background:orange;color:white;padding:5em;} 
 
#content3 {background:black;color:white;padding:5em;} 
 

 
.navigationcontainer{display:none;} 
 
.inputelement:checked ~ .navigationwrapper .navigationcontainer{display:none;} 
 

 

 
.one:checked ~ .navigationwrapper #content1{display:block;} 
 
.two:checked ~ .navigationwrapper #content2{display:block;} 
 
.three:checked ~ .navigationwrapper #content3{display:block;} 
 

 
span{display:inline-block; background:yellow; width:100px; height:50px} 
 
.inputelement{position:absolute;width:100px; height:50px; opacity:0;} 
 
.inputelement:checked + span{background:red;}

<input type="radio" class="inputelement one" name="menu" checked /> 
 
<span>content1</span> 
 
<input type="radio" class="inputelement two" name="menu" /> 
 
<span>content2</span> 
 
<input type="radio" class="inputelement three" name="menu" /> 
 
<span>content3</span> 
 
<div class="navigationwrapper"> 
 
<div id="content1" class="navigationcontainer">content 1 text</div> 
 
<div id="content2" class="navigationcontainer">content 2 text</div> 
 
<div id="content3" class="navigationcontainer">content 3 text</div> 
 
    </div>