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

试试这个未经测试的例子：

$('.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");
    }
});

Answer 2

我实际上并没有将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>

玩得开心。

jQuery：简单的菜单

2 个答案: