单击链接时如何显示 div [关闭]

Question

所以我的主菜单有这个 html 代码：

    <div id="main-container">
        <div id="main-wrapper">
            <div id="logo">
                <h1 id="title">portfolio</h1>

                <h2 id="ready">ready</h2>
            </div>

            <div id="selection">
                <ul>
                    <li><a href="#" id="about">about</a></li>
                    <li><a href="#" id="resume">resume</a></li>
                    <li><a href="#" id="portfolio">portfolio</a></li>
                    <li><a href="#" id="contact">contact</a></li>
                </ul>
            </div>
        </div>
    </div>

所以我想做的是在我的网站上添加一些动画。例如，当我点击“关于”链接时，我希望显示一个 div，就是这个：

    <div id="secondary-container">
        <div id="about-wrapper">
            <div id="header">
                <h1 id="about-heading">about</h1>
            </div>

            <div id="information">
                <h2 id="introduction">introduction:</h2>
                <p id="paragraph">hello! welcome to my website!</p>
            </div>

            <div id="content">
                <h2 id="my-information">my information:</h2>
                <ul>
                    <li>name: <span>danny moon</span></li>
                    <li>age: <span>21</span></li>
                    <li>sex: <span>male</span></li>
                    <li>location: <span>new jersey</span></li>
                </ul>
            </div>

            <div id="feature">
                <h2 id="my-skills">my skills: </h2>
                <ul>
                    <li>html: <span>50%</span></li>
                    <li>css: <span>50%</span></li>
                    <li>javascript: <span>30%</span></li>
                    <li>python: <span>60%</span></li>
                </ul>
            </div>
        </div>
    </div>

我现在的jquery代码很简单

$(document).ready(function(){
    $('#about').click(function(){
        $('#secondary-container').show();
   });
});

但是，当我按下“关于”链接时，什么也没有发生。有什么建议么？如果你们需要我完整的 html/css/jquery/js 文件夹

这是一个使用 Dropbox 的链接：

https://www.dropbox.com/sh/c8abu7mptjz2dkk/AABZWS-dPY7csAxIRgewP6H2a?dl=0

谢谢。

Answer 1

我不确定你是否已经找到了这个，但是在你链接的文件中你有一些小的语法错误。

您在脚本标签末尾缺少右括号“>”。它应该是这样的：

<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<script type="text/javascript" src="../js/showhide.js"></script>

Answer 2

由于您有虚拟的href="#"，当您单击链接时，它可能仍然像链接一样 - 将“#”锚添加到您的 URL。您应该使用event.preventDefault() 阻止链接的默认操作：

$(document).ready(function(){
    $('#about').click(function(event){
        event.preventDefault();
        $('#secondary-container').show();
    });
});

注意传递给点击事件函数的event 参数。