通过页面刷新突出显示asp.net主页中的选定选项卡

Question

我试图实现一件非常简单的事情，但没有成功。我有一个asp.net网站，有一个主页和两个子页面。我在母版页上有两个用于这些子页的选项卡。并且在默认情况下选择在这一点上工作良好的一个。当我点击第二个选项卡时，它用下面的代码成功选择了，但立即刷新页面，并再次选择第一个默认选项卡（无论何时刷新页面）。我也使用event.prventDefault（），但它不起作用。

所以我的问题很简单，当我点击所选选项卡时，如何突出显示它，即使页面也会刷新，谢谢。

请查看以下代码：-

<style type="text/css">
               #header #toplevel-bar li.current {
                padding: 8px 7px 8px 7px;
                background-image: url("/include/images/button_back.jpg");
                border-radius: 5px 5px 0px 0px;
                color: white;
                text-decoration: none;
            }
 </style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#header #toplevel-bar ul li").click(function (event) {
            //event.preventDefault();
            $("#header #toplevel-bar ul li").removeClass("current");
            $(this).addClass("current")
         })
  })
 </script>
<div id="toplevel-bar">
        <ul>
             <li class="current"><a href="Default.aspx">Home</a></li>
             <li><a href="products.aspx">Products</a></li>
             <li><a href="Default.aspx">Services</a></li>
        </ul>
</div>

Answer 1

由于您的页面在单击链接时会刷新，因此无法向其中添加类。请尝试检查url并将其与可用菜单集相匹配。这样的事情可能会帮助你。。

      var href = window.location.href;
      var lastSegment = href.substr(href.lastIndexOf('/') + 1);  
      $("ul > li a[href$='" + lastSegment + "']").addClass("current");