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

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

您缺少右括号'＆gt;'在脚本标签的末尾。它应该是这样的：

<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="#"，当您点击链接时，它可能仍然像链接一样 - 将“＃”锚点添加到您的网址。您应该使用event.preventDefault()阻止链接的默认操作：

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

请注意传递给点击事件功能的event参数。

如何在单击链接时显示div

2 个答案: