Bootstrap Navbar项目活动取决于文件名

Question

我目前正在使用Bootstrap Framework构建我的网站，我在其中有一个小问题，对于我想使用的菜单项，根据文件名，请使用if fileName语句。

例如，如果文件名是"关于"关于"选项卡的"有关"。

<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选择器将活动类添加到相应的链接。

假设：您正在使用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");

在脚本标签中使用此代码，请确保将ID添加到相当于文件名的每个LI。

让我知道您是否遇到其他问题。

Answer 4

根据您的HTML代码，您需要将active类添加到a标签的父级。因此，尝试此代码

$('.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");
            }
    }