Question

我有一个非常简单的网站，有一些菜单标签（即主页，关于我等）和几个段落。我在我的.JS文件中添加了单击功能，以便单击选项卡可以导航到所需的段落（或页面）。但它没有用。

我应该在发布回来时参考这个post。

[注意：我在计算机上运行了apache并安装了xwamp。我将jquery源添加到我的文件中，并将它们准确地保存在正确的路径或文件中。除了我安装了Bootstrap，虽然我没有必要为任何文件设置路径。]

我的代码：

main.php：

    <!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>

<style type="text/css">

</style>
</head>

<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script  type="text/javascript" src="js/main_interaction.js"></script>

<div class="row">
    <div id="header" class="col-xs-12">
         <h1>Welcome to my green world!</h1>

    </div>
    <div class="col-xs-4">
        <ul>
            <li id="home">HOME</li>
            <li id="gallery">GALLERY</li>
            <li id="about">ABOUT ME</li>
            <li id="contact">CONTACT ME</li>
            <li id="diary">MY DIARY</li>
            <li id="blog">BLOG</li>
        </ul>
    </div>
    <div class="col-xs-8 home">
        <p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
    </div>
    <div class="col-xs-8 gallery hidden">
        <p>This is the gallery.</p>
    </div>
    <div class="col-xs-8 about hidden">
        <p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
    </div>
    <div class="col-xs-8 contact hidden">
        <p>Contact me here.</p>
    </div>
    <div class="col-xs-8 diary hidden">
        <p>My diary will be here.</p>
    </div>
    <div class="col-xs-8 blog hidden">
        <p>Blog posts appear here.</p>
    </div>
    <div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>

.JS：

   $("li").on('click', function () {
    $(".col-xs-8").addClass("hidden");
    $("." + $(this).attr("id")).removeClass("hidden");
});

.CSS：

    @import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
    margin: 0;
}
#header {
    background-color: mediumturquoise;
    text-align: center;
    padding: 20px;
    border: 4px solid crimson;
}
.col-xs-8 {
    text-align: center;
    font-family:'Verdana';
    color: mediumblue;
    font-size: 13pt;
}
.col-xs-4{
    border: 4px solid crimson;
    background-color: yellow;
    line-height: 40pt;
    font-family:'Tahoma';
    font-size: 15pt;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.col-xs-4 ul {
    list-style-type: none;
}
#footer {
    background-color: gray;
    border: 2px solid green;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
}
li:hover {
    cursor: pointer;
    text-decoration: underline;
}

Answer 1

您在页面上存在元素之前包含（并因此执行）JavaScript。 HTML / JavaScript按DOM中存在的顺序处理。所以当它运行时：

$("li")

解析器仅位于HTML正文的顶部，尚未将任何li元素加载到DOM中。因此，该选择器找不到任何东西。

将JavaScript放在DOM的末尾或将其包装在文档就绪处理程序中：

$(function () {
    $("li").on('click', function () {
        // etc.
    });
});

（或两者）

Answer 2

on不支持jquery 1.9，请尝试live

$("li").live("click",function(){});

Answer 3

我看了你的代码，想知道是否更换

$("li").on('click', function () {

与

$("li").click(function() {

会解决问题。我已经使用了jquery一段时间但从未使用过“.on”但我的onclicks工作正常。希望这有帮助！

为什么on（'click'，function（））在jQuery中不起作用？

3 个答案: