Активный класс в jQuery navbar не работает, когда я помещаю href - PullRequest
Новая
       115

Активный класс в jQuery navbar не работает, когда я помещаю href

1 голос
/ 16 июня 2020

Я не понимаю, я сделал навигационную панель, используя 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>

Однако, когда я помещаю ссылку на другой div в 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="#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>

Кто-нибудь знает, что происходит? Я был бы очень признателен, если бы кто-нибудь мог мне помочь Моя панель навигации с активным классом

1 Ответ

1 голос
/ 17 июня 2020

Просто проверить щелчок по navbar привязке недостаточно. Если вам нужно решение, которое также работает с back-button или с помощью навигации по коду, после переходов и с 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>
...