0

我试图让导航栏中的一些链接在 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 本身时，它工作正常，但使用导航栏链接，它根本不起作用。

我希望这是有道理的。

4

2 回答 2

3

从“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>
于 2013-09-29T03:32:42.730 回答
1

不要在 li 标签的属性 id 中包含“#”。并关心区分大小写

            <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>
于 2013-09-29T03:33:27.680 回答