StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Your problem is your first block of javascript code. If you set the element's style this will always override any class styles on the element. Currently, when you navigate to the page with a hash #strategy you modify the inline style of the element. I would suggest revising your code like this to modify the class of the element. </p> <pre><code>var hash=location.hash.substring(1); $('#' + hash + '_link').addClass('highlight'); if (hash == ''){ $('#shop1').show() } </code></pre> <p><strong>Edited (Regarding your comment)</strong></p> <p>Here is what I would do:</p> <p>First Create a function that adds the highlight class to a specific hash value and remove the highlight class from all others. You would probably want a default action when an invalid hash value is passed.</p> <pre><code>function highlightCircularMenuIcon(hashValue) { if (hashValue.length) { $('#circularMenu li').removeClass('highlight'); $('#' + hash + '_link').addClass('highlight'); } else { //default action you did have $('#shop1').show(); } } </code></pre> <p>Second, when the document is ready (or loaded), bind the click event for each of the LI elements in the circularMenu. Then in the click function call highlightCircularMenuIcon. Finally in the last part of the document.ready function call highlightCircularMenuIcon with the hash string from your URI.</p> <pre><code>$(document).ready(function () { $('#circularMenu li').click(function() { highlightCircularMenuIcon(($(this).name).replace("_link", "")); }); highlightCircularMenuIcon(location.hash.substring(1)); }); </code></pre>

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