英文:
How to dynamic change a class on EJS based on the URL
问题
我正在学习EJS，我发现我可以在一个文件中制作我的侧边栏并在我的页面上使用它。
但现在我不知道如何自动更改侧边栏上我的锚点的“active”类，有没有一种动态更改它的方式？我的URL根据我所在的页面而变化，所以我想根据那个来更改我的锚点的类。
侧边栏.ejs代码：
<div class="sidebar">
<a href="/vendor" class="active">All Vendors</a>
<a href="/expiring">Close to Expire</a>
</div>
我正在使用EJS、NODE.JS和express...
对于任何英语错误，我很抱歉，这不是我的母语。
英文:
I'm learning EJS and I discover that I can do my sidebar in only one file and use it on my pages.
But now I don't know how to automatically change the "active" class on my anchors on the sidebar, there is a way to change it dynamically? My URL changes depending on the page i'm in, so I thought that I can change the class of my anchor based on that.
sidebar.ejs code:
<div class="sidebar">
<a href="/vendor" class="active">All Vendors</a>
<a href="/expiring">Close to Expire</a>
</div>
I'm using EJS, NODE.JS and express...
Sorry for any English mistakes, it's not my mother language
答案1
得分: 1
以下是翻译好的内容：
只需尝试如下示例，
#sidebar.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.active > a {
color: red;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
var global_queryurl = window.location.href;
var url_pathfinder = new URL(global_queryurl);
var global_queryurl_path = url_pathfinder.pathname;
var global_queryurl_spliter = global_queryurl_path.split('/');
var global_pagename_val = global_queryurl_spliter[global_queryurl_spliter.length-1];
$(document).ready(function(){
$(".tab").removeClass("active");
if(global_pagename_val == "vendor") {
$("#1").addClass("active");
} else if(global_pagename_val == "expiring") {
$("#2").addClass("active");
} else {
$("#1").addClass("active");
}
});
</script>
<!--sidebar-menu-->
<div id="sidebar">
<ul>
<li class="tab" id="1" ><a href="/vendor" >Vendor</a> </li>
<li class="tab" id="2" ><a href="/expiring" >Expiring</a> </li>
</ul>
</div>
<!--sidebar-menu-->
(Note: This is the same content as before, with only the code portions translated.)
英文:
Just try like this example,
#sidebar.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.active > a {
color: red;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
var global_queryurl = window.location.href;
var url_pathfinder = new URL(global_queryurl);
var global_queryurl_path = url_pathfinder.pathname;
var global_queryurl_spliter = global_queryurl_path.split('/');
var global_pagename_val = global_queryurl_spliter[global_queryurl_spliter.length-1];
$(document).ready(function(){
$(".tab").removeClass("active");
if(global_pagename_val == "vendor") {
$("#1").addClass("active");
} else if(global_pagename_val == "expiring") {
$("#2").addClass("active");
} else {
$("#1").addClass("active");
}
});
</script>
<!--sidebar-menu-->
<div id="sidebar">
<ul>
<li class="tab" id="1" ><a href="/vendor" >Vendor</a> </li>
<li class="tab" id="2" ><a href="/expiring" >Expiring</a> </li>
</ul>
</div>
<!--sidebar-menu-->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论