0

我的老问题：一页淡入淡出过渡逻辑

代码工作得很好，但我有一个问题。在我的导航系统中有带有子菜单的菜单，也就是下拉菜单。因此，如果单击没有内容但没有子菜单的菜单链接，则内容页面加载为空白，直到我单击实际具有内容类的内容。

这是一个简单的 jsFiddle 示例：http: //jsfiddle.net/QuKhN/1/

我希望它加载内容，只有当有与菜单链接 ID 对应的内容时。因此，如果在此示例中单击“联系我们”，我不希望它尝试加载名为“联系我们内容”的不存在的 div。

这可能吗？我用 hasClass() 函数尝试了几件事，但我没有成功。

感谢您花时间阅读和理解。

4

4 回答 4

1

您可以选择要显示的元素并使用长度属性来确保存在这样的元素。长度将大于零。

像这样的东西：

$("ul li a ").click(function(){
    var cls = $(this).attr('id');
    // Fade out the previous content no matter what
    $(".content").fadeOut(500);
    // Check if there is content to display using length
    if ($('.' + cls).length > 0) {
       // Will only display content if it exist
       $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})​;​

这是一个工作示例：http: //jsfiddle.net/QuKhN/2/

笔记：

这取决于您不会在其他一些元素上使用这些类，但脚本的其余部分也是如此，所以我想在这种情况下会很好。

于 2012-07-07T11:09:35.987 回答
1

尝试hasClass：

$("ul li a ").click(function(){
    var cls = $(this).attr('id')
    $(".content").fadeOut(500);
    if($("div").hasClass(cls)){
       $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})​
于 2012-07-07T11:10:24.567 回答
1

你可以试试这个：

$("ul li a ").click(function() {
    var cls = $(this).attr('id')
    if ($('div.content.' + cls).length > 0) {  
        $(".content").fadeOut(500);
        $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})

演示

于 2012-07-07T11:12:15.190 回答
1 
$("ul li a").filter(function(){
    return $('.'+this.id).length>0;
}).click(function(){
    var cls = $(this).attr('id')

    $(".content").fadeOut(500);
    $('.' + cls).delay(500).fadeIn(1000);
    return false;
})​

演示

于 2012-07-07T11:13:25.197 回答