Question

我在ASP.NET中使用jQuery代码在单击时更改列表项的类。代码工作正常，但问题是<li>稍微改变了类，但是当代码完全加载时它无法保留。我的代码是这样的：

jQuery的：

$(document).ready(function () {
    //On Click Event
    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
    });
});

HTML：

<div class="menu_nav">
    <ul class="tabs">
        <li><a href="default.aspx"><span>Home Page</span></a></li>
        <li><a href="support.aspx"><span>Support</span></a></li>
        <li><a href="aboutus.aspx"><span>About Us</span></a></li>
        <li><a href="services.aspx"><span>Services</span></a></li>
        <li><a href="contactus.aspx"><span>Contact Us</span></a></li>
    </ul>
</div>

Answer 1

您的代码是正确的，请参阅此处jsfiddle.net/S3hGq /

但点击后，您的浏览器会加载网址，因为它是一个链接。重新加载后，“主动”级别当然不再设置。

会发生什么事吗？给我一些帮助你的信息......

Answer 2

错误的做法。您需要“记住”单击的最后一个锚点（例如，基于id）或读取当前文档位置并根据该高亮显示正确的项目。

我将为第二种方法提供代码：

$(document).ready(function () {
    //read current page:
    var page = document.location.href.split("/").splice(-1,1);

    //find proper item and mark it active:
    $("ul.tabs li a[href='" + page + "']").addClass("active");
});

Answer 3

您必须为所有li标记提供ID。与链接到的页面标题相同，例如li与dashboard.aspx的链接应该将仪表板作为id，并且dashboard.aspx应该将标题作为仪表板，然后编写此代码：

<script language="javascript" type="text/javascript">
    window.onload = function changeClass() {
        document.getElementById(document.title).setAttribute("class", "current");
    }
</script>

在此代码中，我按ID找到页面标题，然后将类设置为链接的li

Answer 4

像Struts 2和Spring MVC for java这样的一些框架说我之前分享的JavaScript是不可思议的，所以我在jquery中提出了相同功能的新版本。

    <script type="text/javascript">
          $(document).ready(function(){
          var testtitle=$('title').text();
          $("#"+testtitle).addClass('current');
          }); 
    </script>

列表项无法保留类

4 个答案: