Question

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

所以我的问题很简单，当我点击它时如何突出显示所选标签，甚至页面都刷新了，谢谢。

请查看以下代码： -

<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

由于您点击链接时页面会刷新，因此您无法为其添加类。请尝试检查网址并将其与可用菜单集匹配。这样的内容可能会对您有所帮助..

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

使用页面刷新突出显示asp.net母版页中的选定选项卡

1 个答案: