將HTML列表項目更改爲在導航欄中處於活動狀態

我正在將我的導航欄加載到頁面底部的$("#navbar-partial").load("navbar.html)的每個頁面中的腳本標記中。將HTML列表項目更改爲在導航欄中處於活動狀態

導航欄列表代碼如下：

<ul id="main-nav" class="nav nav-sidebar"> 
    <li> 
    <a href="a.html"></a> 
    </li>      
    <li> 
    <a href="b.html"></a> 
    </li> 
    <li> 
    <a href="c.html"></a> 
    </li> 
    <li> 
    <a href="d.html"></a> 
    </li> 
</ul>

香港專業教育學院嘗試這樣做，這一些變化，但不能得到它的工作：

$(document).ready(function() { 
    $('.nav li').on('click', function (e) { 
     $(this).addClass('active').siblings().removeClass('active'); 
    }); 
});

這是在同一個腳本標籤在底部負載調用後的HTML頁面。

任何想法？

感謝

來源

2014-10-30 NorCalKnockOut

因爲內容不存在於DOM準備（阿賈克斯給出的異步特性），你需要使用on()到click處理程序祖先元素，它是存在於綁定DOM在點DOM就緒，與id="navbar-partial"元素，在其中您加載新的內容：

// selecting the element present on DOM-ready: 
// binding the 'click' event that's fired on elements 
// matching the '.nav li' selector: 
$('#navbar-partial').on('click', '.nav li', function (e) { 
    $(this).addClass('active').siblings().removeClass('active'); 
});

你可以綁定到一個元素進一步與DOM樹，而是結合到最近的元素是減少檢測事件所需的冒泡量。

參考文獻：

on()。

來源

2014-10-30 21:42:37

仍然沒有運氣，即時檢查控制檯中的HTML和有源標籤的心不是獲取添加。 – NorCalKnockOut 2014-10-30 21:46:49

不幸的是，沒有更多的上下文，我無法提供任何有用的信息;順便說一句，你知道你的初始選擇器'$（「navbar-partial」）'是錯誤的？它不是尋找'id'，而是尋找''的*元素*（這顯然不存在）。 – 2014-10-30 21:49:35

我在問題中輸入錯了，對不起。編輯它 – NorCalKnockOut 2014-10-30 21:54:34

您應該使用代表團

$(document).on('click', ".nav li", function(e) { 
     $(this).addClass('active').siblings().removeClass('active'); 
    });

來源

2014-10-30 21:45:10 Sekai

將HTML列表項目更改爲在導航欄中處於活動狀態

回答

相關問題