ナビゲーションでリンクをクリックするとdivが表示されます

Question

申し訳ありません、オランダ出身ですので、私の悪い英語をお待ちしております。私が試してみて、できるだけ具体的に....

ゴール

は、ナビゲーションバーを持って、アイテムをクリックしたとき、それはそれでコンテンツを持つdiv要素が表示されますよ。

大丈夫、テスト目的のために、私はシンプルjsfiddle 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;} 

を行った上でフィドルは、私が欲しいものであり、動作していません...

次のフィドルは実用的な例ですが、必要なナビゲーションバーは表示されません。

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;} 

私は私がここに達成したいかについて十分に明確だことを願っています。メニュー項目をクリックするとdivが表示され、他のdivは消えます。

ご協力いただければ幸いです！ ああ、可能であればCSSのみ！ Javascriptなし...

ありがとう！

Answer 1

これはあなたの問題を解決するために助けることができるかもしれませ...

はJSがタグ付けされていないメニュータブに

[codepan link here] 

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

Answer 2

イベントアクションではjsを呼び出す必要があります。以下はタブを表示するためのコードです。ここ

$('.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

コード使用して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>