如何在导航中单击链接时显示 div

Question

好吧，我来自荷兰，所以请原谅我的英语不好。我会尽量具体...

目标

有一个导航栏，当单击一个项目时，它将显示一个包含内容的div。

好的，出于测试目的，我做了一个简单的jsfiddlehttps://jsfiddle.net/hjuekLhq/

[网页]

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

[网页]

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