在需要跳转页面下，怎样用js改变点击菜单的样式？

Posted 2023-05-07

在需要跳转页面下，当点击首页时,首页加上样式CurrentLi,其他的链接不加，当点击联系时,联系加上样式CurrentLi,其他的链接不加。<ul id="sddm"><li class="CurrentLi"><a href="/">首页</a></li><li ><a href="/contact/">联系</a></li></al>

<ul id="sddm"><li id='first' class="CurrentLi"><a
href="/">首页</a></li><li ><a
href="/contact/">联系</a></li></al>

$('#first').click(function()
    $(this).addClass('CurrentLi');
);

参考技术A 你这段代码没有问题，原理是初始化页面后遍历导航的链接跟浏览器地址链接比较来添加样式，所以，如果你想打开新页面能相应添加class="on",需要每个页面都有这段代码 参考技术B 可能跟的效果不一样，重点在于理解，祝你成功

<style>
.CurrentLi
background: red;
color: red;

</style>
<ul id="sddm">
<li class="">
<a class="cur" href="#">首页</a>
</li>
<li >
<a class="cur" href="#">联系</a>
</li>
</ul>
<script>
$(document).ready(function()
$("#sddm li").click(function()
$("#sddm li").removeClass("CurrentLi");
);
$("#sddm li:first-child").click(function()
$("#sddm li").removeClass("CurrentLi");
$(this).addClass("CurrentLi");
);
);
</script>本回答被提问者和网友采纳

纯前端如何实现跳转页面而不改变URL（不使用iframe）？

a.html中点击button1清空当前页面并加载b.html

参考技术A 跳转页面而不改变URL怕是没有，只能通过加载的方式了。用js去打开新页，将新页面内容再用js重写到当前页 参考技术B a和b在同一个文件夹下的时候
<button onclick="window.location.href='b.html'">test</button>追问

url还是改变了啊（至少chrome中是这样）

追答

我提供一个思路，在a里面有一个iframe,iframe里是b.html，iframe隐藏起来，大小为0像素。a页面点了按钮后，js取了b.html里所有的对象。再清空a，填进a里面。

参考技术C 现在的前端单页应用不就是这样子么的，通过#hash来动态改变路路参数，从而实现页面路转
.../index.html#/a.html
.../index.html#/b.html 参考技术D 那就要用到js了，如果可以刷新的话，那window.location.href='b.html'这个就可以。