How do detect current page to add an active class to corresponding menu button

Question

I am trying to figure out how to detect what page I am on so I can add a selected class to my html with Jquery. I have tried a few bits of script but they have not worked. I am working on a local server and for now just need something that can somehow detect the page I am on and somehow link it to the li's. I'm not sure how to tackle it

HTML:

<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#"><img src="img/small-icons/access-icon.png" width="17" height="16"    alt=""/>Access</a></li>
<li><a href="index.php">Fader Layout</a></li>
<li><a href="#">Patching</a></li>
<li><a href="#">Wild Controls</a></li>
<li><a href="#">Buses & Outputs</a></li>
<li class="submenu"><a href="#">Contribution</a>
  <ul class="sub-section">
    <li class="go-back"><a>I AM BACK BUTTON for contribti</a></li>
    <li><a>test</a></li>
    <li><a>test</a></li>
  </ul>
</li>
<li><a href="#">Oscillator</a></li>
<li><a href="#">Talkback</a></li>
<li><a href="#">Meters</a></li>
<li><a href="#">Automixer</a></li>
<li><a href="#">Audio Follow Video</a></li>
</li>
<li class="submenu selected"><a href="new-test.php">test-page</a>
  <ul class="sub-section">
    <li class="go-back"><a>Back to Main Menu</a></li>
    <li><a>IwhatN</a></li>
    <li><a>IwhatN</a></li>
  </ul>
</li>
<li class="submenu"><a href="control-surface.php">Control Surface</a>
  <ul class="sub-section">
    <li class="go-back"><a>Back to Main Menu</a></li>
    <li><a>IwhatN</a></li>
    <li><a>IwhatN</a></li>
  </ul>
</li>
</ul>
</div>

This is more suited for the serverside if there are actual redirects, and it's not all ajax. You set the active state depending on what URL is requested from the server — adeneo, Jul 25 '14 at 13:20
Any idea if you can do this on the server side. Also, how are your routes set up? — Stefan, Jul 25 '14 at 13:23
@Stefan what server side backend are you using? There are several ways. As I already mentioned in my answer you can append stuff in backend to your get params and then treat tabs clientside. Or for example in Django you can export specific data via context and then render the template using template tags, but then again this is backend technology specific. Some backends perform session access, such as PHP or Django, I think NodeJS also has that stuff. You might look into handling tabs based on session variables. — andreihondrari, Jul 25 '14 at 13:28
My question was actually for the OP and not a general question of how you would do this on the backend. Good input nonetheless though :) — Stefan, Jul 25 '14 at 13:32
I know it might look like I am using php but I am not really. I am just purely using it because I am using it for includes as I am changing the sidebar and headers a lot and didn't want to do change lots of html pages each time I changed something or added a page. Once I have finished the design they will them be all consolidated into html pages (they are intended to work locally). The obvious and easiest solution would be hard coding the class onto each button for each page. That might become a bit laborious though so I was hoping for a simpler way that can work locally if possible — Suzi Larsen, Jul 25 '14 at 13:37
@SuziLarsen You might make a javascript function that just appends the link with the `` id as a get param and then call it several times for each individual `` element. For the handling part you have a main script based on page id. — andreihondrari, Jul 25 '14 at 13:45
@SuziLarsen I presume some regex that looks like `^.+\/(\w+\.html)$`. I suggest experimenting with : http://regex101.com/. You basically need to use a capturing group to get hold of `page` or `page.html`. — andreihondrari, Jul 25 '14 at 14:17

score 0 · Answer 1 · edited May 23 '17 at 12:11

A solution would be to use get params with something like How to get query string params and form the URL's so that they append the param as ?page=mypage and then get the page name or ID with getParameterByName('page') and then check out where you handle your tabs and perform your desired stylings/actions.

This can also be handled from backend, depending on the backend technology you are using. For example

if PHP, perhaps append the get params there or set specific $_SESSION['page'] variable and handle these clientside
if Django, it can be exported to context or, also appended to get params and handled in the template via javascript or template tags

...and many other possibilities.

If the question though refers to how to set a status based on what page you are on depends on where you want to set that status, for example you might write a script that when clicking a button/link it would first make an ajax POST request to your server sending the ID that you are interested in (setting it in the backend somewhere) and then redirect to wherever you need.

Well yes, it does not matter where the functionality resides but if it is written in way that it is portable. What backend are you using? — andreihondrari, Jul 25 '14 at 13:39
I am just using html and Javascript. unfortunately I can't use php because it will be changed to just html rather than php files — Suzi Larsen, Jul 25 '14 at 13:43

How do detect current page to add an active class to corresponding menu button

1 Answers1