StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <code>:active</code> pseudo-class means that <a href="http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act" rel="nofollow noreferrer">an element is being activated by the user</a>. This is triggered when the link is clicked, but it doesn't tell you what page the user is currently on.</p> <h2>The tedious, manual solution</h2> <p>You could manually go through each page on your website, and in your navigation, add a class to the current page. For example, on the "About Us" page, the navigation mightlook like this:</p> <pre><code><ul id="navigation"> <li><a href="/index.html">Home</a></li> <li><a href="/about.html" class="current-page">About Us</a></li> <li><a href="/contact.html">Contact</a></li> </ul> </code></pre> <p>On the contact page, you would then remove the <code>current-page</code> class from the "About Us" link and add it to the "Contact" link. The problem with this solution is that it requires a lot of manual edits to your code, which can be painful if you're managing a large site.</p> <h2>An automated client-side solution</h2> <p>A better solution might use Javascript to parse the current page from the URL and automatically add the right class to the corresponding link. The jQuery code could look something like this (assuming the same html as above):</p> <pre><code><script type="text/javascript"> $(document).ready(function() { var urlParts = window.location.pathname.split("/"), // get the last section of the url currentPage = urlParts[urlParts.length - 1]; $("#navigation a[href*=" + currentPage + "]").addClass("current-page"); }); </script> </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