[英]I'm trying to set a class name on <a> tag. the problem is when I click on the link the page refreshes and the class is removed
I have the following HTML piece of code我有以下 HTML 段代码
<li>
<a href="javascript:;"><i class="sidebar-item-icon ti-hummer"></i>
<span class="nav-label">Product Management</span><i class="fa fa-angle-left arrow"></i></a>
<ul class="nav-2-level collapse">
<li>
<a href="/admin/addProducts" id="addProductMenu" onclick="addActiveClass(this)" >Add Product</a>
</li>
<li>
<a href="/admin/allProducts" id="allProductsMenu" onclick="addActiveClass(this)">All Products</a>
</li>
<li>
<a href="/admin/recommendedProducts" id="recommendedMenu" onclick="addActiveClass(this)">Recommended</a>
</li>
<li>
<a href="/admin/featuredProducts" id="featuredMenu" onclick="addActiveClass(this)">Featured</a>
</li>
<li>
<a href="/admin/bestSellingProducts" id="bestSellingMenu" onclick="addActiveClass(this)">Best Selling</a>
</li>
<li>
<a href="/admin/popularIndustriesProducts" id="popularIndustriesMenu" onclick="addActiveClass(this)">Under popular industries</a>
</li>
</ul>
</li>
what I want is when I click on any of the <a>
link, the javascript function addActiveClass(this)
is called and add a class class='active'
on the clicked <a>
tag.我想要的是当我点击任何一个
<a>
链接时,调用 javascript function addActiveClass(this)
并在点击的<a>
标签上添加一个 class class='active'
。
The javascript code is javascript 代码是
function addActiveClass(element) {
var el = document.getElementById(element.id);
el.classList.add("active");
el.parentElement.classList.add("active");
}
My problem is that when I click on the link the javascript function is executed and the class gets applied.我的问题是,当我单击链接时,将执行 javascript function 并应用 class。 Then after that, the page refreshes and since the class was added dynamically, after re-loading the page, the previously added class
class='active'
is removed.之后,页面刷新,由于动态添加了 class ,重新加载页面后,之前添加的 class
class='active'
被删除。
How should I make the class get set after a refresh?刷新后应该如何设置 class?
These lists are on the static page that loads child pages which changes.这些列表位于加载更改的子页面的 static 页面上。
Thanks heleg for your suggestion it actually worked,感谢heleg的建议,它确实有效,
I did the following我做了以下
$(document).ready(function() {
var path = window.location.pathname.split("/").pop();
var parent = null;
var activeElement = null;
var target = null;
if (path == "") {
path = "home";
}
if (path == "home") {
target = $('nav div ul li a[href="/admin/' + path + '"]');
} else {
target = $('nav div ul li ul li a[href="/admin/' + path + '"]');
}
target.addClass("active");
if (path != "home") {
activeElement = document.getElementsByClassName("active");
parent = activeElement[0].parentElement;
parent = parent.parentElement;
parent.classList.add("in");
parent = parent.parentElement;
parent.classList.add("active");
}
});
For onclick to work on an anchor tag, you need to stop the default action of an tag on clicking as by default anchor tags navigate to the URL in the link.要使 onclick 在锚标签上工作,您需要停止点击标签的默认操作,因为默认情况下锚标签会导航到链接中的 URL。 You can instead write,
你可以改为写,
function addActiveClass(e) {
e.preventDefault();
let el = document.getElementById(e.target.id);
el.classList.add("active");
el.parentElement.classList.add("active");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.