单击其他链接时如何更改活动课程？

Question

此问题有两种情况：

1. 使用 preventDefault()

2. 不使用 preventDefault()

我正在使用 jQuery 更改活动类。

当我使用 preventDefault() 时会发生什么：

如您所见，我点击了关于我们的链接，点击后显示为活动状态，但内容未显示。

当我不使用 preventDefault() 时会发生什么：

如您所见，我在这里点击了关于我们的链接，内容显示正常，但活动课程仍在主页链接中。

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

How to change active class while click to another link in bootstrap use jquery?

但是这里的问题没有解决。我尝试了每个 jQuery，但都没有成功。

代码：

<nav class="navbar navbar-default navbar-static-top">

                        <div class="container-fluid">

                             <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                               </button>
                                <a class="navbar-brand" href="Default.aspx"><img src="images/layout/check1.png" style="width:310px;padding-left:82px;height:60px;" class="img-responsive" alt="dubaiexporters.com"/>
                                </a>
                          </div>
                      <div id="navbar2" class="navbar-collapse collapse">
                          <ul class="nav navbar-nav navbar-right">
                            <li class="active" style="font-family:Merriweather;"><a href="Default.aspx">Home</a></li>
                            <li class="menu" style="font-family:Merriweather;"><a href="advertize.aspx">Advertise</a></li>                           
                            <li class="dropdown" style="font-family:Merriweather;">
                              <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 style="font-family:Merriweather;"><a href="subscribe.aspx">Subscribe</a></li>
                              <li style="font-family:Merriweather;"><a href="member_benefits.aspx">Memberships</a></li>
                              <li style="font-family:Merriweather;"><a href="aboutus.aspx">About us</a></li>
                              <li style="font-family:Merriweather;"><a href="news.aspx">News</a></li>
                              <li style="font-family:Merriweather;"><a href="contactus.aspx">Contact us</a></li>
                              <li style="font-family:Merriweather;"><a href="media_partners.aspx">Partners</a></li>
                              <li style="font-family:Merriweather;"><a href="login.aspx"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>


                         </ul>                      
                          <a href="addlisting.aspx" target="_blank" class="floatingbanner"></a>
                       </div>

      <!--/.nav-collapse -->
                  </div>
    <!--/.container-fluid -->



              </nav>

jquery：

$(document).ready(function () {
            $('.nav li a').click(function (e) {
                $('.nav li.active').removeClass('active');
                var $parent = $(this).parent();
                $parent.addClass('active');
                //e.preventDefault();
            });
        });

Answer 1

我已经通过使用后面的代码完成了：

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

在这里我将 id 添加到 li 和 runat="server"

代码背后：

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");
        }
}

Answer 2

单击菜单时，您正在加载在锚标记的href 属性中指定的页面。因此，当页面刷新时，单击事件处理程序中添加的活动类将不成立。 您可以使用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());
            });
 });