Geek Answers Handbook

How to apply CSS to the menu when choosing?

I have the task of highlighting the menu selected during page load. For this, I have the following code:

$('.menuHeader').each(function () { $(this).attr('id', 'menu' + ($(this).index() + 1)); $(this).val($(this).index() + 1); // Set the dynamic ids for links $(this).find('a').attr('id', 'link' + ($(this).index() + 1)); //alert('New ID : ' + $(this).find('a').attr('id')); }); $('.menuHeader a').click(function () { alert("a"); $('.menuHeader a').removeClass('menuHeaderActive'); $(this).parent().parent(".menuHeader").addClass('menuHeaderActive'); });

But when I select the second menu, it updates and skips the selection.

HTML:

 <div class="menuBar"> <div class="menuHeader ui-corner-top menuHeaderActive"> <span><a href="#" onclick="Home()">Home</a></span> </div> <div class="menuHeader ui-corner-top"> <span><a href="#" onclick="NewTransaction()">New Transaction</a></span> </div> </div>

How can I solve this problem?

  function Home() { window.location.href = "../../home/welcome"; } function NewTransaction() { window.location.href = "../../EnergyCatagory/index"; }
+6
source share
2 answers

I think you can change your hyperlinks to include the correct url. Then in jQuery we check the current URL of browsers with the URL of the hyperlinks - if it matches your menuHeaderActive class.

 $(document).ready(function () { var currentUrl = window.location.href; var menuLink = $('.menuHeader a[href="' + currentUrl + '"]'); menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive'); });

When the page reloads after clicking one of the menu links, I have to show that the script should be launched, and $('.menuHeader a[href="' + currentUrl + '"]'); should find the menu link (hyperlink / a-tag) that matches the URL to which the user also connected. Then this is the case of finding the div container and adding your class.

Basically, you do not add the css class when the user clicks a menu link; you should set the css class after redirecting the page to another page. So on another page that should set the css class against the correct link of the active menu. There are 100 ways to do this, but based on the fact that you provided the appropriate URLs is the easiest.

Personally, I will have each page register a page identifier that corresponds to one of the menu links. Something like that...

HTML

Note that the data-related-page-id attribute is added to each menuHeader div

 <div class="menuBar"> <div class="menuHeader ui-corner-top" data-associated-page-id="home-welcome"> <span><a href="#" onclick="Home()">Home</a></span> </div> <div class="menuHeader ui-corner-top" data-associated-page-id="energy-catagory-index"> <span><a href="#" onclick="NewTransaction()">New Transaction</a></span> </div> </div>

Javascript

Added to each page

ready-made document handler for the aka ../../ home / welcome welcome page

 $(document).ready(function () { SetActiveMenuCssClass('home-welcome'); });

document handler prepared for the energy category index page, aka ../../ EnergyCatagory / index

 $(document).ready(function () { SetActiveMenuCssClass('energy-catagory-index'); });

function defined globally

 function SetActiveMenuCssClass(pageId) { // finds div with menuHeader class that has the attribute data-associated-page-id equal to the page id // then sets the active class $('.menuHeader[data-associated-page-id="' + pageId + '"]') .addClass('menuHeaderActive'); }

If you use a server-side language like PHP, you can do something like fooobar.com/questions/21767 / ...

+1
source

NOTE. The answer provided by Chris works very well, but in fact you have a link in href from <a></a> , otherwise it will be undefined .

You can add id link to a with link and then use

 var menuLink = $('#'+currentUrl);
  • code provided by Chris

(this way, the page will not be redirected because you clicked the link, but instead launched the function)

 <div class="menuBar"> <div class="menuHeader ui-corner-top menuHeaderActive"> <span><a href="#" id="http://www.yourwebsite.url//home/welcome" onclick="Home()">Home</a></span> </div> <div class="menuHeader ui-corner-top"> <span><a href="#" id="http://www.yourwebsite.url/EnergyCatagory/index" onclick="NewTransaction()">New Transaction</a></span> </div> </div>

And js

 $(document).ready(function () { var currentUrl = window.location.href; var menuLink = $('#'+currentUrl); menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive'); });

On the side of the note, if on another page you need to add menuHeaderActive to active a and remove it from another on this particular page

+1
source

More articles:


All Articles