Question

所以我在使用Ruby on Rails运行的网站上使用在线找到的模板（名称为“Easy Start”）。

主要的困难是我的布局包含“easy start”及其页脚的导航栏，页面内容保存在其他文件中。

我遇到麻烦的部分在这里：

originalList=[5433, (32, 54, 122)]
newList=[item for item in originalList if isinstance(item,tuple)]

如您所见，第一个<div id="divMenuRight" class="pull-right"> <div class="navbar"> <button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse"> NAVIGATION <span class="icon-chevron-down icon-white"></span> </button> <div class="nav-collapse collapse"> <ul class="nav nav-pills ddmenu"> <li class="dropdown active"> <%=link_to 'Accueil', '/'%></li> <li class="dropdown"> <%=link_to 'À Propos', '/about'%></li> <li class="dropdown"> <%=link_to 'Contact', '/contact'%></li> </ul> </div> </div> </div>有两个类，称为“下拉列表”和“活动”。 “活动是使按钮变为红色并显示哪个页面处于活动状态的原因。

所以我尝试制作一个小jQuery函数，在那里我获取当前的URL并尝试将“active”类添加到正确的<li>，同时根据我所在的页面将其从其他页面中删除目前在。

<li>

但它不起作用，互联网上的任何内容都没有给我一个解决方案...... 我（有点）以正确的方式做这件事吗？或者我该怎么做？

提前谢谢

Answer 1

为什么你想通过javascript实现目标？

我会做这样的事情：

<li class="dropdown <%= "active" if controller.controller_name == "contact" %>">
  <%= link_to 'Contact', '/contact'%>
</li>

您可以通过实施辅助方法使其更漂亮。

Answer 2

我可以使用DOM或jQuery为您提供另一种方法来实现您想要的结果，但是如果不了解所报告的错误（如果有的话），就很难说它为什么不能正常工作正如所写的那样（虽然它可以像URL中存在或不存在的尾随斜杠一样简单。）

值得注意的是Peter de Ridder's answer，在Ruby中实现解决方案几乎可能更容易，更明智。

使用jQuery，我建议的替代方案是：

// retrieving the current URL of the page:
var currentURL = document.location.href,

    // selecting the <li> elements with the
    // 'dropdown' and 'active' classes,
    // removing the 'active' class from those elements:
    $('li.dropdown.active').removeClass('active');

    // selecting all <a> elements within the <li>
    // elements of class 'dropdown', and filtering
    // those elements:
    activeLinks = $('li.dropdown a').filter(function () {

        // retaining only those elements
        // whose href property (absolute URL)
        // matches the current page's URL:
        return this.href === currentURL;

    // finding the closest ancestor <li> element
    // with the 'dropdown' class, and adding the
    // 'active' class-name to those elements:
    }).closest('li.dropdown').addClass('active');

使用DOM：

// retrieving the URL of the current page:
var currentURL = document.location.href,

// finding all <a> elements within the <li>
// elements with the class of 'dropdown',
// and using Array.from() to convert that
// collection into an Array:
    links = Array.from( document.querySelectorAll('li.dropdown a') );

// creating an Array from the collection
// returned by document.querySelectorAll(),
// iterating over that Array with
// Array.prototype.forEach():
Array.from( document.querySelectorAll('li.dropdown') ).forEach(function (li) {
    // the first argument (here: 'li') is
    // the array element of the Array over
    // which we're iterating.

    // here we remove the 'active' class
    // from those <li> elements:
    li.classList.remove('active');
});

// here we filter the Array of links:
links.filter(function (a) {

    // retaining only those whose
    // href property contains the
    // (absolute) URL matching the
    // URL of the current page:
    return a.href === currentURL;

// iterating over the Array returned
// Array.prototype.filter(), using
// Array.prototype.forEach():
}).forEach(function (a) {

    // finding the closest ancestor <li>
    // element, with the class of 'dropdown,'
    // to the current <a> element, and
    // adding the 'active' class-name:
    a.closest('li.dropdown').classList.add('active');
});

或者，使用DOM但使用箭头功能（ECMAScript 6）;下面的方法完全相同，但使用箭头函数来避免使用更详细的匿名函数：

var currentURL = document.location.href,
    links = Array.from( document.querySelectorAll('a') );

Array.from( document.querySelectorAll('li.dropdown') ).forEach(function (li) {
    li.classList.remove('active');
});

links.filter( a => a.href === currentURL )
     .forEach( a => a.closest('li.dropdown').classList.add('active'));

无法将类添加到列表元素并从其他元素中删除此相同的类

2 个答案: