highlight the navigation menu for the current page

Question

In a page with some navigation links,I want the link of the current page are hightlighted,just like this:

The link "HTML Attributes" is highlighted(bolded) since this link will take one to the current page.

I know this can be implemented manually(just hightlighted the according link,but is there some smart way? highlight the right link dynamically and automatically?

Answer 1

CSS:

.topmenu ul li.active a, .topmenu ul li a:hover {     text-decoration:none;     color:#fff;     background:url(../images/menu_a.jpg) no-repeat center top; } 

JavaScript:

<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script>   <script type="text/javascript">     $(function() {         // this will get the full URL at the address bar         var url = window.location.href;          // passes on every "a" tag         $(".topmenu a").each(function() {             // checks if its the same on the address bar             if (url == (this.href)) {                 $(this).closest("li").addClass("active");                 //for making parent of submenu active                $(this).closest("li").parent().parent().addClass("active");             }         });     });         </script> 

Html Code:

<div class="topmenu">     <ul>         <li><a href="Default.aspx">Home</a></li>         <li><a href="NewsLetter.aspx">Newsletter</a></li>         <li><a href="#">Forms</a></li>         <li><a href="#">Mail</a></li>         <li><a href="#">Service</a></li>         <li style="border:none;"><a href="#">HSE</a></li>         <li><a href="#">MainMenu2</a>            <ul>               <li>submenu1</li>               <li>submenu2</li>               <li>submenu3</li>           </ul>        </li>     </ul> </div>