Question

我的jQuery代码如下所示：

$(document).ready(function() {    //load the index page into a div container

    //set a bottom (border) line under the item of navigation bar

    $('#siteloader').load('empleados.jsp');   
    $('ul#menu li a.active').css({"borderbottom": "4px solid"});


    //When the hyperlink is clicked
    // set the right color to the item of the navigation bar

    $('ul#menu li a').click(function() {
        var page = $(this).attr('href');
        if (page !== 'index.jsp') {
            $('#siteloader').load(page + '.jsp');
            $('ul#menu li a').css({"color": "#000"});
            $(this).css({"color": "#ca4b00"});
            return false;
        }
        return true;
    });

    //set the color to the item in which the mouse is hovering ontop   
    // a bottom (border) line go to the item where i'm hover

    $('ul#menu li a').hover(function() {
        $('ul#menu li a').css({"color": "#000"});
        $('ul#menu li a').css({"border-bottom-style": "none"});
        $(this).css({"color": "#ca4b00"});
        $(this).css({"border-bottom": "4px solid"});
    });

});

此代码的问题是，如果我没有点击某个项目，则颜色和底线不会设置为正确的项目。为了将线条和颜色设置为正确的项目，我需要做什么？

Answer 1

您有两个选择：

使用CSS选择器而不是javascript

将hover和click定义为单独的函数并手动触发它们。

$(document).ready(function() {    //load the index page into a div container

    //set a bottom (border) line under the item of navigation bar

    $('#siteloader').load('empleados.jsp');   
    $('ul#menu li a.active').css({"borderbottom": "4px solid"});


    var onClick = function() {
        var page = $(this).attr('href');
        if (page !== 'index.jsp') {
            $('#siteloader').load(page + '.jsp');
            $('ul#menu li a').css({"color": "#000"});
            $(this).css({"color": "#ca4b00"});
            return false;
        }
        return true;
    };

    var onHover = function() {
        $('ul#menu li a').css({"color": "#000"});
        $('ul#menu li a').css({"border-bottom-style": "none"});
        $(this).css({"color": "#ca4b00"});
        $(this).css({"border-bottom": "4px solid"});
    };

    //When the hyperlink is clicked
    // set the right color to the item of the navigation bar

    $('ul#menu li a').click(onClick);

    //set the color to the item in which the mouse is hovering ontop   
    // a bottom (border) line go to the item where i'm hover

    $('ul#menu li a').hover(onHover);

        var desiredElement =  $('ul#menu li a').eq(0); // the element you want to apply the styles too. Change the `0` value to select other elements.

        onClick.call(desiredElement); //call the function with the desired element as `this`
        onHover.call(desiredElement); //call the function with the desired element as `this`
});

获取在<div>容器</div>中加载的页面的链接

1 个答案: