Jquery导航栏样式取决于当前页面

Question

我在4个页面中有一个纯HTML/CSS导航栏，如下所示：

<nav id="bar">
<ul id="nav">
<li><a href="aa.html">AA</a></li>
<li><a href="bb.html">BB</a></li>
<li id="page">CC</li>
<li><a href="dd.html">DD</a></li>
</ul>
</nav>

我可以使用javascript和获取页面名称

var pagename = window.location.pathname.split('/').pop();

我想使用Jquery为每个页面添加相同的代码，并根据html页面，删除a链接并使用类似(伪代码(的东西更改id：

$("#nav").append(<li><a href="aa.html">AA</a></li>
<li><a href="bb.html">BB</a></li><li><a href="cc.html">CC</a></li><li><a href="dd.html">DD</a></li>
$("#nav").find(pagename).parent().removelink_and_add_the_"page"_id()

也就是说，如果当前页面是DD.html，导航栏会将<li><a href="dd.html">DD</a></li>更改为<li id="page">DD</li>

有可能吗？有什么提示吗？提前感谢！！

Answer 1

//supose pagename is DD.html
//var pagename = window.location.pathname.split('/').pop();
var pagename = "dd.html";
$("#nav").append('<li><a href="aa.html">AA</a></li><li><a href="bb.html">BB</a></li><li><a href="cc.html">CC</a></li><li><a href="dd.html">DD</a></li>')
var $aElem = $("#nav").find("a[href='" + pagename + "']");
//set id and text/html of li parent (if is just text use text() instead html())
$aElem.parent().attr("id", "page").html($aElem.html());
//bye a element
$aElem.remove();
//checking changes in li element
console.log($("#page")[0])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">
</nav>

Answer 2

使用css属性选择器查找<a>：

let myElem = $("a[href='dd.html']")

然后更改父级的id，将DD文本添加到父级，最后在myElem 上使用.remove()