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）。我认为在你的情况下服务器端方法更好。

jQuery CSS改变回原来！

1 个答案: