JS中的addClass和removeCLass加載內容

Question

我在JS中的addClass和removeCLass有問題。我想這樣做：

但我有一個內容div我在PHP中加載文件。但是，當我加載腳本重置，並選擇第一個李。方案：
我點擊事件，它會得到新的類，並加載內容。現在，當我點擊事件，頁面加載和我看到的內容，但在第一里課。
如何更改它？

編輯： 好吧我改變代碼，但它仍然無法正常工作，因爲我想。 當我在url鏈接中加入「＃」時，頁面加載爲新的，我丟失了這個JS。 （它重新開始）。

CODE：

$(document).ready(function() { 
 
    $("#MB1").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB2").removeClass("active"); 
 
\t \t $("#MB3").removeClass("active"); 
 
\t \t $("#MB4").removeClass("active"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#MB2").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB1").removeClass("active"); 
 
\t \t $("#MB3").removeClass("active"); 
 
\t \t $("#MB4").removeClass("active"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#MB3").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB1").removeClass("active"); 
 
\t \t $("#MB2").removeClass("active"); 
 
\t \t $("#MB4").removeClass("active"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#MB4").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB1").removeClass("active"); 
 
\t \t $("#MB2").removeClass("active"); 
 
\t \t $("#MB3").removeClass("active"); 
 
    }); 
 
});

#menu-div ul{ 
 
list-style-type:none; 
 
} 
 

 
.button a{ 
 
text-decoration: none; 
 
color:green; 
 
} 
 

 
.button a:hover{ 
 
color: red; 
 
} 
 

 
.button.active a{ 
 
text-decoration: underline; 
 
}

<div id="menu-div"> 
 
<ul> 
 
<li id="MB1" class="button active"><a href="?id=start">Home</a></li> 
 
<li id="MB2" class="button"><a href="?id=pro">Projects</a></li> 
 
<li id="MB3" class="button"><a href="#">About Us</a></li> 
 
<li id="MB4" class="button"><a href="?id=con">Contact</a></li> 
 
</ul> 
 
</div>

Answer 1

當你將使用

$('#menu li a').on('click', function(){ 
    $('li a.current').removeClass('current'); 
    $(this).addClass('current'); 
}); 

點擊動作會發生什麼情況是，只有現有的對象接收事件處理程序。

你想用這樣的事情，而不是：

$("body").on('click', '#menu li a', function(){ 
    $('li a.current').removeClass('current'); 
    $(this).addClass('current'); 
}); 

通過使body目標，即使腳本後的數據負載，事件處理程序將被設置。
此外，對菜單的任何後續更改都不會要求您重置事件處理程序。

---

編輯

每更改到示例代碼：

1. 當你有<a href="#"等，按鏈接不會讓你離開頁面。
2. 您將一些鏈接更改爲<a href="?something"等等。點擊這個鏈接，整個頁面重新加載新的查詢字符串。

鏈接是否應該異步獲取數據？
如果YES，你應該返回jquery的方式...並使用我的答案而不是你使用的$(document).ready({[...]。

如果否，我建議您使用PHP來確保正確的菜單項設置爲active。
東西沿着線（我真的不知道PHP ...此代碼可能會完全關閉）：現在

<a href="?whatever" class="button <?php if(request.querystring = "whatever") echo "active"; ?> 
<a href="?something" class="button <?php if(request.querystring = "something") echo "active"; ?>