javascript - html/jquery 的 if 语句

Question

<div class="collapse navbar-collapse navbar-right">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about-us.html">About Us</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li> 
        <li><a href="contact-us.html">Contact</a></li>                        
    </ul>
</div>

我有上面的代码，它突出显示了主页按钮，因为类已设置为事件。

我想做的是，我想放置某种 if 条件，它检测加载了哪些 html 文件，并将类设置为事件状态。

可能类似于 <li (if loaded.(about-us.html):class="active"><a href="about-us.html">About Us</a></li>但这没有用。

Answer 1

只需将其保存在您通常为所有页面加载的一些 js 文件中，并将 id 添加到您的 ul 中，比如 导航在这里。假设您的 url 格式为 - www.somedomain.com/filename.html

HTML

<ul class="nav navbar-nav" id="nav">

JS

(function() {
    var nav = document.getElementById('nav'),
        anchor = nav.getElementsByTagName('a'),
        current = window.location.pathname.split('/')[1];
        for (var i = 0; i < anchor.length; i++) {
        if(anchor[i].href == current) {
            anchor[i].parentNode.className = "active";
        }
    }
})();

还有 jquery 如下:

$(function() {
  $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]')closest('li').addClass('active');
});