获取加载在

Get the link of a page loaded inside a <div> container

本文关键字：加载获取更新时间：2023-09-26

容器。

我的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"});
    });
});

这个代码的问题是，如果我不点击一个项目，颜色和底线没有设置为正确的项目。为了将线条和颜色设置到正确的项目，我需要做些什么?

你有两个选择:

使用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`
});