Jquery 列表项无法保留类

我使用ASP.NET中的jQuery代码在单击列表项时更改其类别。代码运行正常，但问题是

在一段时间内更改了类，但在代码完全加载时无法保留。我的代码如下：

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>

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

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

---

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

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

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

---

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

错误的方法。您需要“记住”上次单击的锚点（例如基于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");
});

---

错误的方法。您需要“记住”上次单击的锚点（例如基于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");
});

---

您必须为所有

li

标记提供一个id。与链接的页面标题相同，例如带有dashboard.aspx链接的li应将dashboard作为id，dashboard.aspx应将标题作为dashboard，然后编写以下代码：

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

window.onload=函数changeClass（）{
document.getElementById（document.title）.setAttribute（“类”、“当前”）；
}

---

在这段代码中，我按id查找页面标题，然后将class设置为链接的li

您必须为所有

li

标记指定一个id。与链接的页面标题相同，例如带有dashboard.aspx链接的li应将dashboard作为id，dashboard.aspx应将标题作为dashboard，然后编写以下代码：

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

window.onload=函数changeClass（）{
document.getElementById（document.title）.setAttribute（“类”、“当前”）；
}

---

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

一些框架，如Struts 2和Spring MVC for java，说我之前共享的JavaScript是obslite，因此我在jquery中提出了相同功能的新版本

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

$（文档）.ready（函数（）{
var testtitle=$（'title'）.text（）；
$（“#”+testtitle）.addClass（'current'）；
}); 

一些框架，如Struts 2和Spring MVC for java，说我之前共享的JavaScript是obslite，所以我在jquery中提出了相同功能的新版本

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

$（文档）.ready（函数（）{
var testtitle=$（'title'）.text（）；
$（“#”+testtitle）.addClass（'current'）；
}); 

“li更改类一段时间，在代码完全加载时无法保留”你是什么意思？如果我没有弄错，那么$（“ul.tabs li”）.removeClass（“active”）；仅仅从第一个LI中删除类不是全部吗？你的意思是它工作一段时间然后停止？？？@Ladineko-你错了；）@YuryTarabanko我想他的意思是，只要他点击菜单，它就会转到另一个页面，但一旦页面加载，它就不会被设置为“活动”菜单项。“li更改类一段时间，在代码完全加载时无法保留”你是什么意思？如果我没有弄错，那么$（“ul.tabs li”）。removeClass（“活动”）；仅仅从第一个LI中删除类不是全部吗？你的意思是它工作一段时间然后停止？？？@Ladineko-你错了；）@YuryTarabanko我想他的意思是，只要他点击菜单，它就会转到另一个页面，但一旦页面加载，它就不会被设置为活动菜单项。你的项目是php项目吗？您是否有php将活动类设置为加载站点的链接？否则，如果只有javascript可以描述您的解决方案，请像@ShadowWizard那样进行描述。使用window.location.href查找与加载页面类似的链接，然后将其设置为活动。您的项目是php项目吗？您是否有php将活动类设置为加载站点的链接？否则，如果只有javascript可以描述您的解决方案，请像@ShadowWizard那样进行描述。使用window.location.href查找与加载页面类似的链接，然后将其设置为活动。