Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I think you could amend your hyperlinks to include the correct url. Then in you jQuery test the browsers current url against the hyperlinks url - if it's a match apply your <code>menuHeaderActive</code> class.</p> <pre><code>$(document).ready(function () { var currentUrl = window.location.href; var menuLink = $('.menuHeader a[href="' + currentUrl + '"]'); menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive'); }); </code></pre> <p>When the page reloads after one of the menu links have been clicked the script I've shown should run and <code>$('.menuHeader a[href="' + currentUrl + '"]');</code> should find the menu link (hyperlink/a-tag) that matches the url the user navigated too. Then it's a case of finding the container div and adding your class.</p> <p>Basically you don't add the css class when the user clicks the menu link; you have to set the css class after the page has redirected to the other page. So it's the other page that has to set the css class against the correct active menu link. There are 100's of ways to do this but based on what you've provided matching urls is the simplest. </p> <p>Personally I'd have each page register a page id that corresponds to one of the menu links. Something like this...</p> <p><strong>HTML</strong> </p> <p>Note the attribute <em>data-associated-page-id</em> added to each menuHeader div</p> <pre><code>&lt;div class="menuBar"&gt; &lt;div class="menuHeader ui-corner-top" data-associated-page-id="home-welcome"&gt; &lt;span&gt;&lt;a href="#" onclick="Home()"&gt;Home&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="menuHeader ui-corner-top" data-associated-page-id="energy-catagory-index"&gt; &lt;span&gt;&lt;a href="#" onclick="NewTransaction()"&gt;New Transaction&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Javascript</strong></p> <p>Added to each page</p> <p>document ready handler for welcome page aka ../../home/welcome</p> <pre><code>$(document).ready(function () { SetActiveMenuCssClass('home-welcome'); }); </code></pre> <p>document ready handler for energy catagory index page aka ../../EnergyCatagory/index</p> <pre><code>$(document).ready(function () { SetActiveMenuCssClass('energy-catagory-index'); }); </code></pre> <p>function defined globally</p> <pre><code>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'); } </code></pre> <p>If you were using a server side language like PHP then you could do something like this <a href="https://stackoverflow.com/a/11814284/81053">https://stackoverflow.com/a/11814284/81053</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload