如何通过单击菜单隐藏显示部分？答案

【问题标题】：How to hide Show section with menu click?如何通过单击菜单隐藏显示部分？
【发布时间】：2017-09-05 22:13:05
【问题描述】：

我创建了一个菜单：

<ul class="navigation-bar navigation-bar-left">
            <li class="active"><a href="#about">About</a></li>
            <li><a  href="#schedule" data-toggle="tab">schedule</a></li>
            <li><a href="#speakers" data-toggle="tab">speakers</a></li>
            <li><a href="#map" data-toggle="tab">Map</a></li>
            <li class="featured"><a href="register.html"><i class="fa fa-play-circle fa-1x"></i>Register</a></li>
</ul>

我想显示/隐藏相应的部分：

<section id="about" class="section dark">

谢谢！

【问题讨论】：

你想要一个菜单点击来显示隐藏一个部分吗？
我知道它没有被标记，但在 Jquery 中你只需要说$(".section").toggle()。在原生 JavaScript 中，您有一个函数检查元素的可见性，如果它被隐藏则显示它，如果它显示则隐藏它。

标签： javascript html css

【解决方案1】：

使用 jquery toggle() 方法以简单的方式执行此操作。
参考http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

【讨论】：

【解决方案2】：

如果你有这样的结构

<ul class="navigation-bar navigation-bar-left">
            <li class="active"><a href="#about" id="nav_about">About</a></li>
            <li><a  href="#schedule" data-toggle="tab">schedule</a></li>
            <li><a href="#speakers" data-toggle="tab">speakers</a></li>
            <li><a href="#map" data-toggle="tab">Map</a></li>
            <li class="featured"><a href="register.html"><i class="fa fa-play-circle fa-1x"></i>Register</a></li>
</ul>

<section id="sec-about" class="section dark"><h2>About</h2></section>

你可以像这样切换部分

document.getElementById('nav_about').addEventListener('click', function(){
    var secAbout = document.getElementById('sec-about');
    if( getComputedStyle(secAbout,null).display=='none') secAbout.style.display='block';
    else secAbout.style.display='none';
}, false);

比较jsfiddle

【讨论】：