如何更改 jQuery mobile 标题中的元素？答案

【问题标题】：How to change element in header of jQuery mobile?如何更改 jQuery mobile 标题中的元素？
【发布时间】：2019-09-08 05:53:26
【问题描述】：

我正在使用 jQuery mobile 1.4.5 并尝试更改标题中元素的链接颜色。由于 jQuery mobile 的行为不会再次加载标题以创建流畅的体验，因此颜色不会改变。

例外，如果我添加 data-ajax="false"，那么它会改变。但是应该有办法避免这种情况。

我在标题中的导航：

<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 标记，这将有效。

如何在不重新加载整个标题的情况下设置颜色？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案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>

【讨论】：