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 回答