Javascript 突出显示活动页面

我在一个网站上工作，这个网站有大约20页的侧导航。我没有在每个页面上复制和粘贴侧导航，而是在一个JS文件中创建了所有链接，并将其添加到HTML页面中，以便在需要时进行更改

我的问题是：有没有一种方法可以创建活动页面？这是我的JS代码（页面上正在使用W3CSS）：

document.write（'服务：\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
')

HTML:

内容

首先-使用同步javascript文件来维护导航通常是个坏主意。如果用户访问您的站点时禁用了JavaScript，他们将永远看不到导航。更好的选择是使用PHP或其他服务器端语言引入共享导航模板

如果您确实需要以这种方式在客户端执行此操作，那么最好检查导航中的每个链接，看看它是否匹配

location.pathname

，如果匹配，则切换一个类

//通过查询收集所有导航链接：
var navLinks=document.queryselectoral（'.w3-bar-block.w3-light-grey a.w3-bar-item.w3 button'）；
//通过导航链接进行循环：
对于（var i=0；i

理想情况下，您应该真正使整个导航动态化。下面是一个例子：

（函数（）{
//将边栏链接列表存储为对象数组：
变量链接=[
{
url:“/page/7/备选争议解决方案”，
标题：“替代争议解决方案”
},
{
url:“/page/8/上诉惯例”，
标题：“上诉实践”
},
{
url:“/page/9/航空法”，
标题：“航空法”
}
];
//开始构建您的HTML：
var html='1〕\
服务：\
\
';
//循环浏览所有链接并构建它们的HTML：
links.forEach（函数（link）{
//每个链接的初始类：
变量类=[
“w3条形项目”，
“w3按钮”
];
//检查此链接是否处于活动状态并添加类
if（link.url==location.pathname）{
class.push（'w3-green'）；
}
//为每个链接附加HTML：
html+=''；
});
//添加HTML的最后一位：
html+=''；
//将其写入页面：
document.write（html）；
})();

当前活动页面中是否添加了类？需要在链接上获得一个活跃的类它自己一些反馈来配合我的否决票会很好…：）我第一部分做得很好。你能给我讲解一下动态代码吗？我似乎无法让它工作，JS绝对不是我的强项。我也有一个正在使用的服务器，所以PHP不是不可能的。非常感谢您的帮助：）@xxdash数组定义中似乎有语法错误（缺少逗号-哎呀）。让我知道，如果它仍然给你带来麻烦，或者如果你有任何具体问题的实施。这是完美的工作。非常感谢您的帮助！

document.write('<h4>Services:</h4>\
<div class="w3-bar-block w3-light-grey">\
    <a href="/page/7/alternative-dispute-resolution" class="w3-bar-item w3-button">Alternative Dispute Resolution</a>\
    <a href="/page/8/appellate-practice" class="w3-bar-item w3-button">Appellate Practice</a>\
    <a href="/page/9/aviation-law" class="w3-bar-item w3-button">Aviation Law</a>\
    <a href="/page/10/business-and-commercial-law" class="w3-bar-item w3-button">Business and Commercial Law and Litigation</a>\
    <a href="/page/11/contract-law" class="w3-bar-item w3-button">Contract Law</a>\
    <a href="/page/12/construction-law" class="w3-bar-item w3-button">Construction Law</a>\
    <a href="/page/13/design-professsional-representation" class="w3-bar-item w3-button">Design Professional Representation</a>\
    <a href="/page/14/dram-shop-and-liquor-license" class="w3-bar-item w3-button">Dram Shop and Liquor Liability</a>\
    <a href="/page/15/employment-law" class="w3-bar-item w3-button">Employment Law</a>\
    <a href="/page/17/enviromental-law" class="w3-bar-item w3-button">Environmental Law, Abestos, and Toxic Torts</a>\
    <a href="/page/18/general-civil-litigation" class="w3-bar-item w3-button">General Civil Litigation</a>\
    <a href="/page/19/mass-transit-liability" class="w3-bar-item w3-button">Government and Mass Transit Liability</a>\
    <a href="/page/20/insurance-and-indemnity-law" class="w3-bar-item w3-button">Insurance Coverage and Indemnity Law</a>\
    <a href="/page/21/ip-and-trademark-litigation" class="w3-bar-item w3-button">Intellectual Property and Trademark Litigation</a>\
    <a href="/page/22/motor-vehical-law" class="w3-bar-item w3-button">Motor Vehical Law</a>\
    <a href="/page/23/premises-liability" class="w3-bar-item w3-button">Premises Liability</a>\
    <a href="/page/24/product-liability" class="w3-bar-item w3-button">Product Liability</a>\
    <a href="/page/25/professional-liability" class="w3-bar-item w3-button">Professional Liability</a>\
    <a href="/page/26/transportation-liability" class="w3-bar-item w3-button">Transportation, Trucking, and Highway Liability</a>\
    <a href="/page/27/workmens-compensation" class="w3-bar-item w3-button">Workmens Compensation</a>\
</div>')

   <div class="w3-display-container w3-content w3-white" id="home" style="min-width:100%;">
        <div class="w3-content w3-white">
            <div class="w3-row">
                <div class="w3-twothird w3-margin-top" style="font-size: 18px; text-align: justify; padding-left: 5%; padding-right: 5%;">
                    <p>content</p>
                </div>
                <div class="w3-third w3-padding">
<script src="services.js"></script>
                    </div>

                </div>
            </div>
        </div>
    </div>