javascript - 突出显示事件页面

Question

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

我的问题是:有没有办法让事件页面highlight on the side navigation ？这是我的 JS 代码(页面上使用了 W3CSS):

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

HTML:

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

Answer 1

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

如果您真的需要以这种方式在客户端进行，最好的办法是检查导航中的每个链接，看它是否与 location.pathname 并切换一个类(如果是)。

// collect all navigation links with a query:
var navLinks = document.querySelectorAll('.w3-bar-block.w3-light-grey a.w3-bar-item.w3-button');

// loop through the nav links: 
for (var i = 0; i < navLinks.length; i++) {
    var link = navLinks[i];
    // check if link path equals current path and add a class
    if (link.pathname === location.pathname) {
        link.classList.add('w3-green');
    }
}

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

(function() {
    // store your list of sidebar links as an array of objects:
    var links = [
        {
            url: '/page/7/alternative-dispute-resolution',
            title: 'Alternative Dispute Resolution'
        },
        {
            url: '/page/8/appellate-practice',
            title: 'Appellate Practice'
        },
        {
            url: '/page/9/aviation-law',
            title: 'Aviation Law'
        }
    ];

    // start building your HTML:
    var html = '\
    <h4>Services:</h4>\
    <div class="w3-bar-block w3-light-grey">\
    ';

    // loop through all links and build their HTML:
    links.forEach(function(link) {
        // initial classes for each link:
        var classes = [
            'w3-bar-item',
            'w3-button'
        ];

        // check if this link is active and add a class
        if (link.url === location.pathname) {
            classes.push('w3-green');
        }

        // append HTML for each link:
        html += '<a href="' +
                link.url +
                '" class="' +
                classes.join(' ') +
                '" title="' +
                link.title +
                '">' +
                link.title +
                '</a>';
    });

    // add last bit of HTML:
    html += '</div>';

    // write it to the page:
    document.write(html);
})();