jquery - 为什么这些 jQuery 对象不起作用?

标签 jquery html css jquery-ui

我试图让导航栏中的一些链接触发 jQuery 中的事件。

主体的 HTML 代码:

<body>
    <div id="bodydiv">
        <div id="header">
            <div id="navbar">
                <ul>
                <li id="#linkabout"><span>About</span></li>
                <li id="#linkservices"><span>Services</span></li>
                <li id="#linkportfolio"><span>Portfolio</span></li>
                <li id="#linknews"><span>News</span></li>
                </ul> 
            </div>
        </div>
        <div id="middleAbout">
        </div>
        <div id="middleServices">
        </div>
        <div id="middlePortfolio">
        </div>
        <div id="middleNews">
        </div>

        <div id="footer">
        </div>
    </div>
</body>

jQuery 代码:

$(document).ready(function() {

    $('span').hover(function() {
        $(this).stop().fadeTo(100, 0.75);
    }, function() {
        $(this).stop().fadeTo(100, 1);
    });

    $('#linkServices').click(function(){
        $('#middleAbout').hide('slide', {direction: 'left'}, 1000);
        $('#middleServices').show('slide', {direction: 'right'}, 1000);
    });

    $('#linkPortfolio').click(function(){
        $('#middleServices').hide('slide', {direction: 'left'}, 1000);
        $('#middlePortfolio').show('slide', {direction: 'right'}, 1000);
    });

    $('#linkNews').hover(function(){
        $('#middlePortfolio').hide('slide', {direction: 'left'}, 1000);
        $('#middleNews').show('slide', {direction: 'right'}, 1000);
    });

    $('#linkAbout').click(function(){
        $('#middleNews').hide('slide', {direction: 'left'}, 1000);
        $('#middleAbout').show('slide', {direction: 'right'}, 1000);
    });
});

最后,这是一个网站链接,用于描述我无法用文字描述的内容: http://www.darcain.com

我想让导航栏中的每个元素都链接到一个 div,当单击相应的 div 时,它会优雅地滑入。目前,它们只是漂亮的颜色。

当我将需要单击的 jQuery 对象更改为 div 本身时,它工作正常,但是对于导航栏链接,它根本不起作用。

我希望这是有道理的。

最佳答案

从“id”参数值中取出“#”符号。 JQuery 需要“#”符号才能知道它正在寻找一个 dom 元素,其“ID”参数的值与您提供的前面的名称相同,但您没有将“#”添加到 id 参数值。应该看起来像这样。

        <li id="linkabout"><span>About</span></li>
        <li id="linkservices"><span>Services</span></li>
        <li id="linkportfolio"><span>Portfolio</span></li>
        <li id="linknews"><span>News</span></li>

关于jquery - 为什么这些 jQuery 对象不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19074099/

相关文章:

javascript - 在选择时更改文本区域的边框颜色

jquery - 动态文本导致网页底部出现空白

javascript - 添加和删​​除 HTML 元素后永久减速 : What causes it and how to fix it?

jquery - 我可以使用 CSS 或 jQuery 定位父节点吗?

javascript - 向下滚动页面后固定标题跳转

javascript - Sharepoint 2010 沙盒解决方案文件托管 - 显示下载结果

jquery - 滑入div推送内容

javascript - 幻灯片更改后淡入对象

javascript - 使用包含框架的 html 页面加载 Div

PHP 使用 HTML 表单更新 MySQL 表