I am working on an ASP MVC application that includes a menu with JavaScript functionality to navigate between pages. Currently, when I click on a menu item, it becomes bold and remains bold even when another menu item is selected. This results in all menu items becoming bold if they are clicked sequentially.
Below is the code snippet for one of the menu items:
<script>
$('#firstMenuItem').click(function () {
$('#div').load(
"@Url.Action("FirstMenu","SomeItem")",
{ 'id':'123'},
function (response, status, xhr) {
if (status == "error") {
alert("An error occurred while loading the data.");
}
});
this.style.fontWeight = 'bold';
});
</script>
I am looking for a way to modify this code so that only the currently active menu item appears bold, and the rest revert back to normal font weight. How can I achieve this?