如何在导航中单击 link 时显示 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;}

上面的fiddle是我想要的，不行...

以下 fiddle 是一个工作示例，但它不会显示所需的导航栏。

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。下面是显示标签的代码。

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

这是使用 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>

Answer 3

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

尝试点击菜单选项卡

[codepan link here]

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

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

Howto make a div appear when clicking link in navigation

html

css

navigation

hover