Question

我正在为我的客户面板制作导航栏。它上面有很多链接。单击链接时，它将更改屏幕主要部分中显示的内容。我需要能够更改li（导航栏）中每个ul条目的类。

这是我的代码，它有效：

$(document).ready(function() {

  function changeActive() {
    $('#elem1, #elem2').removeClass("active");
  }

  $('#main-section').load('src-pages/elem1.html');
  $('#elem1').addClass("active");

  $('li#elem1').click(function() {
    //load file now
    $('#main-section').load('src-pages/elem1.html');
    changeActive();
    $(this).addClass("active");
  });
  $('li#elem2').click(function() {
    //load file now
    $('#main-section').load('src-pages/elem2.html');
    changeActive();
    $(this).addClass("active");
  });
});

我正在尝试使文件大小尽可能小，并希望将$(this).addClass("active");行添加到changeActive函数中。当我将该行添加到函数中时，它无法正常工作，只会将:hover和:focus样式应用于li或a元素。

有人可以解释一下：

为什么该行（$(this).addClass("active");）在函数
如何修复该行以将其置于函数

提前谢谢。

Answer 1

我认为问题是你试图在changeActive函数中做$（this）.addClass（）。

如果是这种情况，$（this）选择器无效，因为＆＃39;这个＆＃39;是在这种情况下触发事件的元素的jquery引用。

你需要通过这个＆＃39;这个＆＃39;到你的其他功能然后它应该工作。尝试：

function changeActive(el) {
    $('#elem1, #elem2').removeClass("active");    
    $(el).addClass('active');//el is the 'this' passed on from your event listener
}

$('li#elem1').click(function() {
    //load file now
    $('#main-section').load('src-pages/elem1.html');
    changeActive(this);
    //$(this).addClass("active");
  });

jquery - 更改类函数

1 个答案: