单击导航中的链接时如何使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

这可能有助于解决您的问题...

尝试点击菜单标签

[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>