Jquery 单击其他链接时如何更改活动类？

此问题有两种情况：

使用preventDefault（）

不使用preventDefault（）

我正在使用jQuery更改活动类

使用preventDefault（）时会发生什么情况：

正如你所看到的，我点击了关于我们的链接，点击后显示活动，但内容没有显示

如果不使用preventDefault（），会发生什么情况：

正如你所看到的，在这里我点击了关于我们的链接，内容显示正常，但是活动类仍然在主链接中

如何解决这个问题？我找到了这个链接：

但在这里，问题没有得到解决。我尝试了所有jQuery，但都不起作用

代码：

---

单击菜单，您正在加载锚定标记的

href

属性中指定的页面。因此，当页面正在刷新时，单击的事件处理程序中添加的活动类将不会保持true。 您可以使用

localStorage

保存单击的

li

的索引，并相应地添加

active

类。试试下面的jquery代码

$(document).ready(function () {
            var index = localStorage.getItem('liIndex');
            if(index) {
               $('.nav li.active').removeClass('active');
               $('.nav li:eq(' + index + ')').addClass('active');
            }
            $('.nav li a').click(function (e) {
                var $parent = $(this).parent();
                localStorage.setItem('liIndex', $parent.index());
            });
        });

使用cookies也可以实现同样的效果，请参见下面的代码

    function setCookie(key, value) {
      var expires = new Date();
      expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

$(document).ready(function () {
            var index = getCookie('liIndex');
            if(index) {
               $('.nav li.active').removeClass('active');
               $('.nav li:eq(' + index + ')').addClass('active');
            }
            $('.nav li a').click(function (e) {
                var $parent = $(this).parent();
                setCookie('liIndex', $parent.index());
            });
 });

---

我已经通过使用代码隐藏完成了：

<li style="font-family:Merriweather;"><a href="Default.aspx">Home</a></li>
                               <li id="test1" style="font-family:Merriweather;" runat="server"><a href="advertize.aspx">Advertise</a></li>                              
                            <li id="test2" class="dropdown" style="font-family:Merriweather;" runat="server">
                              <a href="exhibition.aspx" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li style="font-family:Merriweather;"><a href="dubaiexhibitions.aspx">Trade fairs in U.A.E</a></li>
                                   <li style="font-family:Merriweather;"><a href="exhibition.aspx">Trade fairs worldwide</a></li>
                                  <li style="font-family:Merriweather;"><a href="addexhibition.aspx">Add Your Event</a></li>             
                              </ul>
                            </li>
                              <li id="test3" style="font-family:Merriweather;" runat="server"><a href="subscribe.aspx">Subscribe</a></li>
                              <li id="test4" style="font-family:Merriweather;" runat="server"><a href="member_benefits.aspx">Memberships</a></li>
                              <li id="test5" style="font-family:Merriweather;" runat="server"><a href="aboutus.aspx">About us</a></li>
                              <li id="test6" style="font-family:Merriweather;" runat="server"><a href="news.aspx">News</a></li>
                              <li id="test7" style="font-family:Merriweather;" runat="server"><a href="contactus.aspx">Contact us</a></li>
                              <li id="test8" style="font-family:Merriweather;" runat="server"><a href="media_partners.aspx">Partners</a></li>
                              <li id="test9" style="font-family:Merriweather;" runat="server"><a href="login.aspx" runat="server"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

---

jquery是客户端。如果要在单击新页面后加载该页面，将重新加载该链接并删除该类。您必须在新页面的内容中使用ajax，或者使用服务器端语言添加类，或者使用jquery在页面加载时重新添加类（我建议选项2）@Pete是否有解决此问题或与此相关的任何其他链接的方法？@Pete是的…我使用c#，你有没有用cookies尝试过同样的逻辑，在cookies中你可以存储上一次单击的li父类的索引，并相应地添加/删除活动类？我尝试过这个方法，但效果不好…..现在我正尝试使用代码隐藏来实现它。。

    function setCookie(key, value) {
      var expires = new Date();
      expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

$(document).ready(function () {
            var index = getCookie('liIndex');
            if(index) {
               $('.nav li.active').removeClass('active');
               $('.nav li:eq(' + index + ')').addClass('active');
            }
            $('.nav li a').click(function (e) {
                var $parent = $(this).parent();
                setCookie('liIndex', $parent.index());
            });
 });

<li style="font-family:Merriweather;"><a href="Default.aspx">Home</a></li>
                               <li id="test1" style="font-family:Merriweather;" runat="server"><a href="advertize.aspx">Advertise</a></li>                              
                            <li id="test2" class="dropdown" style="font-family:Merriweather;" runat="server">
                              <a href="exhibition.aspx" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li style="font-family:Merriweather;"><a href="dubaiexhibitions.aspx">Trade fairs in U.A.E</a></li>
                                   <li style="font-family:Merriweather;"><a href="exhibition.aspx">Trade fairs worldwide</a></li>
                                  <li style="font-family:Merriweather;"><a href="addexhibition.aspx">Add Your Event</a></li>             
                              </ul>
                            </li>
                              <li id="test3" style="font-family:Merriweather;" runat="server"><a href="subscribe.aspx">Subscribe</a></li>
                              <li id="test4" style="font-family:Merriweather;" runat="server"><a href="member_benefits.aspx">Memberships</a></li>
                              <li id="test5" style="font-family:Merriweather;" runat="server"><a href="aboutus.aspx">About us</a></li>
                              <li id="test6" style="font-family:Merriweather;" runat="server"><a href="news.aspx">News</a></li>
                              <li id="test7" style="font-family:Merriweather;" runat="server"><a href="contactus.aspx">Contact us</a></li>
                              <li id="test8" style="font-family:Merriweather;" runat="server"><a href="media_partners.aspx">Partners</a></li>
                              <li id="test9" style="font-family:Merriweather;" runat="server"><a href="login.aspx" runat="server"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

Page Load
{
       String activepage = Request.RawUrl;
        if (activepage.Contains("advertize.aspx"))
        {
            test1.Attributes.Add("class", "active");
        }
       else if (activepage.Contains("subscribe.aspx"))
        {
            test3.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("member_benefits.aspx"))
        {
            test4.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("aboutus.aspx"))
        {
            test5.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("news.aspx"))
        {
            test6.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("contactus.aspx"))
        {
            test7.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("media_partners.aspx"))
        {
            test8.Attributes.Add("class", "active");
        }
        else if (activepage.Contains("login.aspx"))
        {
            test9.Attributes.Add("class", "active");
        }
}