JQuery: простое меню

Question

Я пытаюсь выучить jQuery, используя простое меню. У меня есть <div> элементы, которые действуют как кнопки и имеют ссылки в них. Я пытаюсь добавить события onclick в div, которые перемещают браузер по адресу ссылки в div. Это в основном мой псевдокод. Каким будет настоящий код? Как я могу улучшить это? Любые отзывы приветствуются!

// Iterate over each menu button

$('.masterHeaderMenuButton').each(function () {

    // Get the link in each button and set the button's onclick to 
    // redirect to the link's address

    var url = $('a', this).attr('href');

    this.click(function () {
        window.location.href = url;
    });

    // If the user is on the page for the current button, hilight it

    if (window.location.href === url) {
        $('a', this).addClass("masterHeaderMenuButtonSelected");
    }
});

Answer 1

На самом деле я не использую jQuery для такой упрощенной задачи, особенно если она включает перенаправление страниц. Поэтому, если вы не хотите загружать страницы в стиле AJAX, придерживайтесь стандартного HTML.

Для этой задачи я использую эту сладкую комбинацию:

$('#nav_links li').live('click', function() {
    var ajax_link = $(this).attr('rel');                                      

    loadLink(ajax_link);
});

function loadLink(link){
    $('#content_window').css('position','relative');                              
    $('#content_window').animate({
        'left': '20px',
        'opacity': '0'
    }, 500, "swing", function() {

        $.ajax({
               url: '../sections/' + link,
               dataType: 'html',
               success: function(html) {
                   $('#content_window').html(html);
               }
        });
    });
}

Круто, верно?

Вот HTML:

<ul id="nav_links">
    <li rel="setting-up.html"><span class="green">|</span>setting up<br></li>
    <li rel="features.html"><span class="purple">|</span>features<br></li>
    <li rel="more-uses.html"><span class="blue">|</span>more uses<br></li>
    <li rel="troubleshooting.html"><span class="yellow">|</span>troubleshooting</li>
</ul>

Веселитесь.

Answer 2

Попробуйте этот непроверенный пример:

$('.masterHeaderMenuButton a').each(function () {

    // Get the link in each button and set the button's onclick to 
    // redirect to the link's address

    var _this = this; // save this ref for click handler.
    $( this ).parent().click(function () {
        window.location.href = $(_this).attr('href');
    });

    // If the user is on the page for the current button, highlight it

    if (window.location.href === url) {
        $(this).addClass("masterHeaderMenuButtonSelected");
    }
});