如何更改jQuery mobile标题中的元素?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何更改jQuery mobile标题中的元素?相关的知识,希望对你有一定的参考价值。
我正在使用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');
});
如果我将数据-ajax =“false”添加到a href标记,则此方法有效。
如何在不重新加载整个标题的情况下设置颜色?
答案
试试这个 :)
$().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>
以上是关于如何更改jQuery mobile标题中的元素?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 JQuery Mobile for iOS 中发生页面更改时添加一些操作