1

我在 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>
4

4 回答 4

1

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

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

是这样吗？给我一些更多的信息来帮助你...

于 2012-12-17T13:57:18.747 回答
0

错误的做法。您需要“记住”最后一次单击的锚点（例如基于 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");
});
于 2012-12-17T14:03:19.553 回答
0

一些框架，如 Struts 2 和 Spring MVC for java 说我之前共享的 JavaScript 已经过时，所以我想出了 jquery 中相同功能的新版本。

    <script type="text/javascript">
          $(document).ready(function(){
          var testtitle=$('title').text();
          $("#"+testtitle).addClass('current');
          }); 
    </script>
于 2013-09-11T06:54:53.070 回答
0

您必须为所有li标签提供一个 id。与它所链接的页面标题相同，例如链接到dashboard.aspx的li应该将dashboard作为id，并且dashboard.aspx应该将title作为dashboard，然后编写以下代码：

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

在这段代码中，我通过 id 找到页面的标题，然后将类设置为链接的 li

于 2012-12-20T09:17:42.453 回答