提问者:小点点

当URL具有导航选项卡id时,我想添加和删除类


我已经将bootstrap的nav-tab添加到我的项目中。我能够添加将当前选项卡的ID添加到URL的逻辑。

现在我想让我的JS在页面加载时根据URL参数/哈希提供的ID激活tab。

我现在遇到的问题是,它只是捡起了最后一个if条件。

null

$(document).ready(function() {
  var url = window.location.href;
  if ("url:contains('features#standard-features')") {
    $(".features_tab_nav .feat_nav_item0 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item1 a , .features_tab_nav .feat_nav_item2 a ,  .features_tab_nav .feat_nav_item3 a").removeClass("active");
  }
  if ("url:contains('features#optional-design-features-accesories')") {
    $(".features_tab_nav .feat_nav_item1 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item0 a , .features_tab_nav .feat_nav_item2 a ,  .features_tab_nav .feat_nav_item3 a").removeClass("active");
  }

  if ("url:contains('features#benefits-of-steel-structures')") {
    $(".features_tab_nav .feat_nav_item2 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item0 a , .features_tab_nav .feat_nav_item1 a ,  .features_tab_nav .feat_nav_item3 a").removeClass("active");
  }
  if ("url:contains('features#optional-roof-and-wall-panels')") {
    $(".features_tab_nav .feat_nav_item3 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item0 a , .features_tab_nav .feat_nav_item1 a ,  .features_tab_nav .feat_nav_item2 a").removeClass("active");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

null


共2个答案

匿名用户

如果您首先声明var url,那么为什么要使用字符串“url:contains('')”?

试试看:

if(url.indexOf("features#standard-features") > -1){
// your code
}

匿名用户

您正在if条件中使用字符串。它应该如下所示:

if (url.contains('features#standard-features')) {
}

也可以使用包含的方法:

if (url.includes('features#standard-features')) {
}