Question

我创建了一个菜单：

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

谢谢！

Answer 1

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

Answer 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

如何隐藏显示部分，点击菜单？

2 个答案: