vendredi 28 avril 2017

Highlight Active Page

I'm working on a website that has a side navigation on about 20 pages. Instead of copying and pasting the side navigation on each individual page, I created all of the links in a JS file and just added it to the HTML pages for easier ability to change if and when needed.

My question is: is there a way to have the active page highlight on the side navigation? This is my JS code (W3CSS is being used on the pages):

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>')




Aucun commentaire:

Enregistrer un commentaire