Question

当我点击事件，关闭或联系我们导航时加载页面，javascript正在工作，即显示div（最初在css我保持显示：无;对于id为home的div，事件，aboutus，contactus）。但是当我想从事件，事情或联系方式回家时，div没有改变（它没有显示）。请帮助

HTML

Array.prototype.len = function () { return this.length; };
var len = Function.prototype.apply.bind(Array.prototype.len);
len([1,2,3]); // 3

的jQuery

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body id="body">
<nav>
    <ul class="brand">
        <li><a href="#">title</a></li>
    </ul>
    <ul class="links">
        <li><a href="#" id="home_nav">Home</a></li>
        <li><a href="#" id="events_nav">Events</a></li>
        <li><a href="#" id="about_us_nav">About us</a></li>
        <li><a href="#" id="contact_us_nav">Contact us</a></li>
    </ul>
</nav>
<div class="main-section">
    <div class="home" id="home"><h1>hello</h1></div>
    <div class="events" id="events"><h1>bonjour</h1></div>
    <div class="about_us" id="about_us"><h1>namaste</h1></div>
    <div class="contact_us" id="contact_us"><h1>ciao</h1></div>
</div>
</body>
</html>

css文件我保留了$('#events_nav').click(function(){ $('#events').show(); }); $('#home_nav').click(function(){ $('#home').show(); }); $('#about_us_nav').click(function(){ $('#about_us').show(); }); $('#contact_us_nav').click(function(){ $('#contact_us').show(); }); div的ids - events，home，about_us，contact-us。

Answer 1

您的代码唯一错误的是您永远不会隐藏先前打开的div。我猜你的css自定义是导致它变为＆＃34;永远不会改变＆＃34;，因为结果是点击两个后显示两个div（依此类推）。

Answer 2

我为你写了一个JSBin并稍微更改了你的代码以获得所需的输出。我认为的主要问题是你想要操纵CSS属性以获得可见性而不是显示无。可见性与显示不同。当您显示none时，您实际上是从DOM中删除它，因此您无法选择它。当隐藏它的可见性时，它仍然是可选择和可修改的。

以下是工作示例的链接：http://jsbin.com/foligufevo/edit?html,css,js,output

您可能还想开始使用$（＃selector）.on（＆＃39; event＆＃39;，fn）而不是绑定到click事件。以下是描述原因的文档：http://api.jquery.com/on/

希望有所帮助！

我想制作导航系统，点击div更改

2 个答案: