jQuery CSS 更改恢复到原始状态！

Question

我在 ASP.NET 母版页上设置了一些选项卡式导航。这是非常基本的：

    <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>

我使用以下 jQuery 来设置当前选项卡：

  <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>

出于某种原因，当我单击其中一个选项卡时，会短暂显示更改，但随后它们会恢复到原始状态。这是 MasterPage 的副作用吗？我只是做错了什么吗？

Answer 1

好吧，问题是 jQuery 更改 css 页面后会重新加载。当然，元素也会恢复到原来的状态。

母版页只是构建页面的一种便捷方式，它不是框架集。因此，您需要在服务器端实现样式更改，或者以某种方式保留您的更改（例如，将选项卡的 # 保存在 cookie 中，并在每次重新加载时根据该 cookie 更新 css）。我认为在你的情况下服务器端方法更好。