Question

我正在尝试在导航栏中设置一些链接来引发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时，div将正常滑动。目前，它们只是漂亮的颜色。

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

我希望这是有道理的。

Answer 1

从“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>

Answer 2

不要在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>

为什么这些jQuery对象不起作用？

2 个答案: