0

为什么这不起作用？我已经在这里坐了几个小时，因为我很困惑......它在 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>

我错过了什么非常简单的东西吗？

4

3 回答 3

0

您的脚本未在 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

于 2013-07-24T02:55:35.290 回答
0

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

于 2013-07-24T02:57:31.887 回答
0

我已经更新了这个，因为上面@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);
        });
    });
})
于 2013-07-30T13:13:51.920 回答