Блог

Главная - Вопросы по программированию - Как изменить элемент в заголовке jQuery mobile?

Как изменить элемент в заголовке jQuery mobile?

#jquery #jquery-mobile

#jquery #jquery-mobile

Вопрос:

Я использую jQuery mobile 1.4.5 и пытаюсь изменить цвет ссылки элемента в заголовке. Из-за поведения jQuery mobile, который не загружает заголовок снова, чтобы создать плавный интерфейс, цвет не изменится.

Исключение, если я добавлю data-ajax=»false», тогда он изменится. Но должен быть способ избежать этого.

Мой navi в заголовке:

 <nav>
    <a href="/test/" id="nav_test" class="ui-link">TEST</a>
    <a href="/other/" id="nav_other" class="ui-link">OTHER</a>
</nav>

Код jQuery, который установит цвет активной ссылки на красный:

 $( document ).ready(function() {
  console.log('nav_'    window.location.pathname.split('/')[1]);
  $('#nav_'    window.location.pathname.split('/')[1]).css('color', '#7e000b');
});

Это работает, если я добавляю data-ajax=»false» в тег a href.

Как я могу установить цвет, не загружая весь заголовок снова?

Ответ №1:

Попробуйте это 🙂

 $().ready(function(){
  let location = window.location.pathname.split('/')[1];
  $('.ui-link').css('color', 'rgb(0, 0, 238)'); // reseting colors of all links
  switch (location) {
    case "test":
      $("#nav_" location).css('color', '#7e000b')
      break;
    case "other":
      $("#nav_" location).css('color', '#7e000b')
      break;
    default:
  }
  // onclick handler in case you arent doing an actual redirect (onepager)
  $('.ui-link').click(function(){
    location = $(this).id.split('_')[1];
    $('.ui-link').css('color', 'rgb(0, 0, 238)'); // reseting colors of all links
    $(this).css('color', '#7e000b'); // updating this link color
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
    <a href="/test/" id="nav_test" class="ui-link">TEST</a>
    <a href="/other/" id="nav_other" class="ui-link">OTHER</a>
</nav>
Метки: