Question

I have setup some tabbed navigation on my ASP.NET Masterpage. It is pretty basic:

    <div id="nav_tabs">
        <div id="home" class="tab selected_tab "><a href="Default.aspx" onclick="tabSwitch('home');">Home</a></div>
        <div id="products" class="tab other_tab "><a href="ProductList.aspx" onclick="tabSwitch('products');">Products</a></div>
        <div id="demos" class="tab other_tab "><a href="Demos.aspx" onclick="tabSwitch('demos');">Demos</a></div>
    </div>

And I use the following jQuery to set the current tab:

  <script type="text/javascript" >
      function tabSwitch(tab) {
          $('.tab').css("background-image", "url('/Images/other_Tab.png')");
          $("#" + tab).css("background-image", "url('/Images/Active_Tab.png')");
      }
  </script>

For some reason when I click on one of the tabs, the changes are briefly shown, but then they revert back to their original state. Is this a side effect of the MasterPage? Am I just doing something wrong?

Answer 1

Well, the problem is that after jQuery changes css page reload occurs. And of course elements return to their original state.

Master page is just a convenient way to construct pages, it’s not a frameset. So you need to either implement your style changes on the server side or persist your changes somehow (for example save # of tab in a cookie and update css on every reload based on that cookie). I think in your case server side method is better.