Question

我目前正在使用bootstrap框架构建网站，但我遇到了一个小问题，就是我想根据菜单项使用if语句来激活菜单项。

例如，如果文件名是“ about”，则“ about”选项卡将处于活动状态。

<li class="nav-item active">
    <a class="nav-link" href="about.php">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</li>



var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
alert(filename);

如果有人能够提供帮助，我会非常感激，在过去的3个小时中，我一直在努力，没有取得任何成功。

Answer 1

您已经成功从URL中检索了文件名。这样，您就可以使用jQuery选择器将 active 类添加到相应的链接中。

假设：您正在使用jQuery，因为它目前是Bootstrap组件的要求。

示例：

<script>
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);    

$('a[href*="' + filename + '"]').addClass('active');
</script>

Answer 2

您可以检查所有导航栏菜单以找到匹配项。这是一个例子

$('.navbar ul li a').each(function(){
    var $this = $(this);
    // if the current path is like this link, make it active
    if($this.attr('href').indexOf(filename) !== -1){
        $this.parents('li').addClass('active');
        return false;
    }
})

“文件名”是您当前的实际文件名。

Answer 3

$('.nav-link').removeClass("active");
$('#' + filename).addClass("active");

在script标记内使用此代码，并确保将ID添加到每个等效于filename的li。

如果您遇到其他问题，请告诉我。

Answer 4

根据您的html代码，您需要将active类添加到a标签的parent中。所以尝试这段代码

$('.nav-item').removeClass('active'); //Remove active class from elements
$('a[href*="' + filename + '"]').parent().addClass("active"); // add active class

Answer 5

这是使用本地javascript的动态方式

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var file = filename.split(".");
var TagItems = document.getElementsByClassName("nav-item");
for(navitem of TagItems)
    {
        for(item of navitem.children)
            {
              var targetFile = item.getAttribute("href").split(".");
                if(targetFile[0] == file[0])
                    navitem.classList.add("active");
                else
                    navitem.classList.remove("active");
            }
    }

Bootstrap导航栏项是否有效取决于文件名？

5 个答案: