当我放一个 href 时,jQuery 导航栏中的活动类不起作用

Posted

技术标签:

【中文标题】当我放一个 href 时,jQuery 导航栏中的活动类不起作用【英文标题】:Active class in jQuery navbar doesn't work when I put an href 【发布时间】:2020-10-06 05:50:10 【问题描述】:

我不明白,我使用 jQuery mobile 制作了一个导航栏,如他们网站上所述:https://demos.jquerymobile.com/1.4.5/navbar/

当我不在无序列表元素中放置href时它工作正常(导航栏的点击项变为活动状态):

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="menu">
  <div data-role="navbar">
    <ul>
      <li><a href="" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li>
      <li><a href="" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li>
      <li><a href="" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li>
    </ul>
  </div>
  <!-- /navbar -->

</div>

但是,当我在 href 中引用另一个 div 时(我正在制作一个网页,当点击导航栏项目时,内容会发生变化)点击时活动类不再激活。

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div id="menu">
  <div data-role="navbar">
    <ul>
      <li><a href="#swim" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li>
      <li><a href="#cycle" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li>
      <li><a href="#run" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li>
    </ul>
  </div>
  <!-- /navbar -->
</div>

我尝试使用 jQuery 为项目添加一个类,但它不起作用。如果我输入以下代码,则单击时第一项不会变为活动状态:

$("#1").click(function() 
  $("#1").addClass("ui-btn-active");
);
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div id="menu">
  <div data-role="navbar">
    <ul>
      <li><a href="#swim" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li>
      <li><a href="#cycle" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li>
      <li><a href="#run" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li>
    </ul>
  </div>
  <!-- /navbar -->
</div>

但是,我知道它可以工作,因为如果我输入以下代码,其他两项确实会更改为活动类:

$("#1").click(function() 

  $("#1").addClass("ui-btn-active");
  $("#2").addClass("ui-btn-active");
  $("#3").addClass("ui-btn-active");

);
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div id="menu">
  <div data-role="navbar">
    <ul>
      <li><a href="#swim" class="contentUpdate" id="1"><i class="fas fa-swimmer"></i>Swim</a></li>
      <li><a href="#cycle" class="contentUpdate" id="2"><i class="fas fa-biking"></i>Cycle</a></li>
      <li><a href="#run" class="contentUpdate" id="3"><i class="fas fa-running"></i>Run</a></li>
    </ul>
  </div>
  <!-- /navbar -->
</div>

有人知道发生了什么吗? 如果有人可以帮助我,我将不胜感激 My Navbar with an active class

【问题讨论】:

从这个页面demos.jquerymobile.com/1.4.5/navbar和这个api.jquerymobile.com/navbar: "ui-btn-active 类在添加到激活的链接之前首先从导航栏中的所有锚点中删除。如果这是指向另一个页面的链接,则该类将在转换完成后再次被删除。“ -​​ 所以它被添加但因为你有一个 href 它被删除。 “我正在制作一个网页,当点击导航栏项目时,内容会发生变化” - 不要使用href=#id,而是使用一点js来显示/隐藏内容。 @freedomn-m 我明白了,我现在明白了这个问题。我阅读了您的评论,因此我将 js 更改为使用 id 而不是 href 引用 div 并且它有效!我无法在此评论中编写代码,但我只是想让您知道我可以解决它,感谢您!非常感谢:) 【参考方案1】:

仅检查navbar 锚点单击是不够的。如果您需要一个同样适用于back-button 或通过在代码中导航,在transitions 之后使用external toolbar 的解决方案,您可能需要检查pagecontainerchange 触发器内的当前页面并相应地更新navbar

$(function()
  $( "[data-role='header'], [data-role='footer']" ).toolbar( theme: "a" ).enhanceWithin();
);

$( document ).on( "pagecontainerchange", function(e, ui) 
  if(typeof ui.toPage == "object") 
    var id = $.mobile.activePage.attr("id"),
      navbar = $("[data-role=navbar]"),
      buttons = navbar.find(".ui-btn"),
      current = navbar.find("a[href='#"+id+"']");
    buttons.removeClass($.mobile.activeBtnClass);
    current.addClass($.mobile.activeBtnClass);
  
);
<!DOCTYPE html>
<html>
  <head>
    <title>Focus Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  </head>
  <body>
    <div data-role="header">
      <div id="menu" data-role="navbar">
        <ul>
          <li><a href="#swim" id="1">Swim</a></li>
          <li><a href="#cycle" id="2">Cycle</a></li>
          <li><a href="#run" id="3">Run</a></li>
        </ul>
      </div>	
    </div>
    <div id="swim" data-role="page">
      <div data-role="content">Page Swim </div>
    </div>
    <div id="cycle" data-role="page">
      <div data-role="header" data-add-back-btn="true">
        <h3>My app</h3>
      </div>
      <div data-role="content">Page cycle</div>
    </div>
    <div id="run" data-role="page">
      <div data-role="content">Page run</div>
    </div>
  </body>
</html>

【讨论】:

以上是关于当我放一个 href 时,jQuery 导航栏中的活动类不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Xcode 和 Swift 在我的导航栏中添加标题?

导航栏中的引导下拉菜单未打开

jQuery Mobile 导航栏中每行超过 5 个项目

Bootstrap / jQuery:在导航栏中滑动“活动”状态

激活 Twitter Bootstrap 导航栏链接

jQuery 适用于 Heroku,但不适用于 Rails localhost