Question

为什么这不起作用？我一直坐在这里几个小时，因为我很困惑......它在jsFiddle http://jsfiddle.net/5SHdr/8/中完美地运作

<!DOCTYPE html>
<html>
<head>
<style>
body
{
    padding:0;
    margin:0;
}

#menu
{
    width:100%;
    background-color:#ddd;
}

#menu .link
{
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
    padding:5px;
    cursor:pointer;
}
#menu .link.active
{
    color:blue;
}

#main
{
    padding:5px;
}

#main .content
{
    display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$('.link').click(function () {
    if ($(this).hasClass('active')) return false;
    var name = $(this).attr('id');
    var $visible = $('#main .content:visible');
    $('.active').removeClass('active');
    $(this).addClass('active');
    if ($visible.length == 0) showContent(name);
    else $visible.fadeOut(500, function () {
        showContent(name);
    });
});

function showContent(name) {
    $('#main .' + name).fadeIn(500);
}
</script>
</head>
<body>
<div id="menu">
    <div class="link" id="home">Home</div>
    <div class="link" id="blog">Blog</div>
    <div class="link" id="about">About</div>
</div>
<div id="main">
    <div class="home content">This is the home content.</div>
    <div class="blog content">This is the blog content.</div>
    <div class="about content">This is the about content.</div>
</div>
</body>
</html>

我遗失了一些非常简单的东西吗？

Answer 1

您的脚本不在dom准备就绪内，在左侧面板的第二个下拉列表中，您选择了onload，这意味着您将在窗口加载事件中执行脚本面板中的脚本。

jQuery(function($){
    $('.link').click(function () {
      console.log('x')
        if ($(this).hasClass('active')) return false;
        var name = $(this).attr('id');
        var $visible = $('#main .content:visible');
        $('.active').removeClass('active');
        $(this).addClass('active');
        if ($visible.length == 0) showContent(name);
        else $visible.fadeOut(500, function () {
            showContent(name);
        });
    });
})

演示：Plunker

Answer 2

小提琴中的代码有效。但是，您应该将事件放在$（document）.ready函数中。或者，您可以在正文关闭之前将脚本移动到页面底部

Answer 3

我已更新此内容，因为@ Arun-P-Johny上面的答案与IE8不兼容。

$(document).ready(function ($) {
    $('.link').click(function(e){ 
        if ($(this).hasClass('active')) return false;
        var name = $(this).attr('id');  
        var $visible = $('#main .content:visible');
        $('.active').removeClass('active');
        $(this).addClass('active');
        if ($visible.length == 0) showContent(name);
        else $visible.fadeOut(500, function () {
            showContent(name);
        });
    });
})

jQuery简单.fadeIn演示不适合我

3 个答案: