Question

此问题有两种情况：

使用preventDefault（）
不使用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>

在这里，我向li和runat="server"添加了ID

后面的代码：

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

使用Cookie可以实现相同效果，请参见以下代码

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

单击其他链接时如何更改活动班级？

2 个答案: