Почему эти объекты jQuery не работают?

Question

Почему эти объекты jQuery не работают?

0

Я пытаюсь, чтобы некоторые ссылки в navbar отправили событие в 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, он работает нормально, но с помощью ссылок на навигацию он вообще не работает.

Надеюсь, это имело смысл.

Theodore 29 сен. 2013, в 05:53

Источник

Теги:

jquery

html

css

jquery-ui

2 ответа

1

Не включая "#" в вашем идентификаторе атрибута тега li. И забота о чувствительности к регистру

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

Teddy 29 сен. 2013, в 02:09

Ещё вопросы

Justin Russo · Accepted Answer · 2013-09-29T02-13-00.000Z

Возьмите знак "#" из ваших значений параметра "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, чтобы убедиться, что все остальные div были скрыты.
Рад, что это помогло. Удачного кодирования.