Javascript 获取a中加载的页面链接<；部门>；容器

我的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添加样式
• 将

  悬停

  和

  单击

  定义为单独的功能，并手动触发它们

  $(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`
  });
  

---

尝试从单击事件中删除css代码，并将其直接放在文档中。准备就绪（即如果您希望在页面加载时加载颜色），如果有帮助，请不要忘记接受答案。