Блог

Вот моя проблема: у меня есть модифицированный скрипт spasticNav jQuery для меню навигации, который устанавливает «большой двоичный объект» для элемента li с id = «выбранный». Большой двоичный объект перемещается при наведении курсора мыши на другую ссылку в меню, но затем возвращается к элементу li с идентификатором =»выбранный».

Все это работает нормально, но элемент li должен иметь id =»selected», иначе большой двоичный объект не будет отображаться. Я хочу иметь возможность установить идентификатор элемента li текущей страницы на «выбранный» без необходимости создавать уникальный список навигации для каждой страницы.

Вот jquery:

 (function($) {

$.fn.spasticNav = function(options) {

    options = $.extend({
        overlap : -15,
        speed : 500,
        reset : 1500,
        color : '',
        easing : 'easeOutExpo'
    }, options);

    return this.each(function() {

        var nav = $(this),
            currentPageItem = $('#selected', nav),
            blob,
            reset;

        $('<li id="blob"></li>').css({
            width : currentPageItem.outerWidth()   options.overlap,
            height : currentPageItem.outerHeight()   options.overlap,
            left : currentPageItem.position().left - options.overlap / 2,
            top : currentPageItem.position().top - options.overlap / 2,
            backgroundColor : options.color
        }).appendTo(this);

        blob = $('#blob', nav);

        $('li:not(#blob)', nav).hover(function() {
            // mouse over
            clearTimeout(reset);
            blob.animate(
                {
                    left : $(this).position().left - options.overlap / 2,
                    width : $(this).width()   options.overlap
                },
                {
                    duration : options.speed,
                    easing : options.easing,
                    queue : false
                }
            );
        }, function() {
            // mouse out    
            reset = setTimeout(function() {
                blob.animate({
                    width : currentPageItem.outerWidth()   options.overlap,
                    left : currentPageItem.position().left - options.overlap / 2
                }, options.speed)
            }, options.reset);

        });

    }); // end each

};

});
  

и вот мой html:

 <div id="navcontainer">     <!--navigation-->
    <div id="nav">
    <ul>
        <li id="selected"><a href="index.html">Home</a></li>
        <li><a href="about_us.html">About Us</a></li>
        <li><a href="ministries.html">Ministries</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="resources.html">Resources</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
</div>
  

Вероятно, это легко исправить, но я все еще новичок.

Убедитесь, что ни у одного из nav li нет жестко закодированного id="selected" , затем вы можете сверить hrefs nav с текущим URL и динамически добавить идентификатор следующим образом:

 $('#nav').find('li').each(function(i, ele){
    if (window.location.href.indexOf($(this).find('a').attr('href')) >= 0) {
        this.id = "selected";
    }
});