code_junkie

How do I highlight a link based on the current page?

Nov 11th, 2011
111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.07 KB | None | 0 0
  1. <a id="active" href="thisPage.html">this page</a>
  2.  
  3. a#active { color: yellow; }
  4.  
  5. <!-- base.html -->
  6. ...
  7. <body class="{% block bodyclass %}{% endblock %}">
  8. ...
  9. <div id="nav">
  10. <ul>
  11. <li id="nav-questions"><a href="{% url questions %}">Questions</a></li>
  12. <li id="nav-tags"><a href="{% url tags %}">Tags</a></li>
  13. <li id="nav-users"><a href="{% url users %}">Users</a></li>
  14. <li id="nav-badges"><a href="{% url badges %}">Badges</a></li>
  15. <li id="nav-ask-question"><a href="{% url ask_question %}">Ask Question</a></li>
  16. </ul>
  17. </div>
  18.  
  19. <!-- questions.html -->
  20. {% extends "base.html" %}
  21. {% block bodyclass %}questions{% endblock %}
  22. ...
  23.  
  24. body.questions #nav-questions a,
  25. body.tags #nav-tags a,
  26. body.users #nav-users a,
  27. body.badges #nav-badges a,
  28. body.ask-question #nav-ask-question a { background-color: #f90; }
  29.  
  30. body.questions #questionsTab
  31. {
  32. color: #f00;
  33. }
  34.  
  35. // assuming this JS function is called when page loads
  36. onload()
  37. {
  38. if (location.href.indexOf('/questions') > 0)
  39. {
  40. document.getElementById('questionsLink').className = 'questionsStyleOn';
  41. }
  42. }
Add Comment
Please, Sign In to add comment