jquery - How to highlight selected tab in Web Forms including Master Page -

i know without master page simple setting tab each page selected how do master page?

home page

houses page (the home tab stays selected though on houses page)

expected output

i used following tutorial highlighting selected jquery tab using asp.net master page

master page

<script type = "text/javascript">         $(function () {             $('#scrolltotop').bind("click", function () {                 $('html, body').animate({ scrolltop: 0 }, 1200);                 return false;             });              function setcurrenttab(selectedtab) {                 $('li').removeclass('selected');                 $('[id=selectedtab]').addclass('selected');             }         });     </script>  <div id="navigation">                     <ul>                         <li id="tab1">                             <a href="home.aspx">home</a>                         </li>                         <li id="tab2">                             <a href="houses.aspx">houses</a>                         </li>                         <li id="tab3">                             <a href="about.aspx">about</a>                         </li>                         <li id="tab4">                             <a href="contact.aspx">contact</a>                         </li>                     </ul>                 </div> 

houses.aspx

<script>         setcurrenttab('tab2');     </script> 

css

#navigation li, #navigation li a:hover, #navigation li.selected {     background-image: url(../images/bg-menu.png);     background-repeat: repeat-x; 

replace code

$('[id=selectedtab]').addclass('selected'); 

with

$('[id='+selectedtab+']').addclass('selected');  

or

$('#'+selectedtab).addclass('selected'); 

you have selected tab id in selectedtab variable, using literal, concat selectedtab id.

on houses.aspx, call setcurrenttab function on document.ready. like

$(function(){ setcurrenttab('tab2'); });