jquery - 更改類功能

Question

我正在爲我的客戶端面板製作導航欄。它有很多鏈接。點擊鏈接時，它會改變屏幕主要部分顯示的內容。我需要能夠更改ul（導航欄）中每個li條目的類別。

這是我的代碼，它的工作原理：

$(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元素。

有人能解釋一下：

1. 爲什麼這條線（$(this).addClass("active");）在功能不起作用
2. 我怎麼能修復線，以把它裏面的函數

先謝謝你。

Answer 1

我認爲問題在於您正在嘗試在changeActive函數內執行$（this）.addClass（）。

如果是這種情況，$（this）選擇器不起作用，因爲'this'是在這種情況下觸發事件的元素的jquery引用。

您需要將'this'傳遞給您的其他函數，然後它應該可以工作。嘗試：

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