Question

在我的主页上，我目前有一个jQuery，它将一个类（在本例中为下划线）添加到link元素。这很好用，它是基于将浏览器中的url（url / firstsubmenu）与link元素的href进行比较的。

但是，一旦我转到该链接元素的子级（url / firstsubmenu / secondsubmenu），该类就消失了。我试图拆分URL，以便jQuery始终查找父级，但我无法解决它。你能帮助我吗？

是否可以通过添加其他代码来解决，例如“ if（this）.children（）。length> 0吗？”

这是我的jQuery：

var cururl = window.location.href;
cururl = cururl.split('#')[0];
jQuery("a.rs-layer").each(function(){
    if(jQuery(this).attr('href')=== cururl){
        jQuery(this).addClass("current-slider-menu");
    }
});

编辑：我对此并不陌生，我尝试了很多不同的代码，用了几个小时的时间在Google上搜索。我现在知道我只能在CMS中编写JavaScript。也就是说，我不能使用jQuery运算符，例如$。

Answer 1

已编辑

尝试

  var cururl = window.location.href;
    jQuery("rs-layer[id|='"+cururl.split('/')[3]+"'] , .rs-layer[href='"+cururl+"']").each(function(){
           jQuery(this).addClass("current-slider-menu");
    });

Answer 2

尝试一下，

根据需要更改类/选择器。这样会在li元素中添加一个唯一的类，现在您可以使用CSS设置样式。

<%= link_to "Foo", new_rabbit_path(@rabbit), data: { turbolinks: false } %>

Answer 3

您肯定在正确的轨道上。

您可以抓住currentURL（在锚点#之前）：

const currentURL = window.location.href.split('#')[0];

然后，您可以将currentURL拆分为其组成文件夹：

const currentURLArray = currentURL.split('/');

然后，您可以分别获取所有myLinks：

const myLinks = [...document.querySelectorAll('a.rs-layer')];

最后，您可以循环浏览myLinks，如果您要匹配的文件夹名称与currentURL中的等效文件夹名称匹配，则可以添加{{1} }类：

.current-slider-menu

完整示例：

for (myLink of myLinks) {

  if (myLink.href.split('/')[1] === currentURLArray[1]) {

    myLink.classList.add('current-slider-menu');
  }
}

Answer 4

我改为这样解决它，用文本修饰跳过了整个想法。我加了一支箭。完成。

JS：

var url = window.location.href;
  var msg = document.getElementById('current-menu-item-arrow');
  if( url.search( 'my-word' ) > 0 ) {
      msg.style.display = "block";
  }

CSS：

#current-menu-item-arrow {display:none;}

jQuery根据父URL添加类

4 个答案: