javascript - 获取加载到 容器中的页面的链接

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