Question

我的html中有一个ul元素..

<ul class="sidebar-menu"> /<ul>

可以有两种<li>元素..

a）简单..

<li>
                <a href="/Campaign/CreateCampaignUrl">
                    <i class="fa fa-th"></i> <span>Campaign Url</span>
                    <small class="label pull-right bg-green">new</small>
                </a>
            </li>

b）复杂..

<li class="treeview">
                <a href="#">
                    <i class="fa fa-files-o"></i>
                    <span>Classify Events</span>
                    <span class="label label-primary pull-right">4</span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="/ClassificationUI/ClassifyStandardEvent"><i class="fa fa-circle-o"></i> Standard Events</a></li>
                    <li><a href="/Campaign/ClassifyCampaignProperties"><i class="fa fa-circle-o"></i> Campaign Properties</a></li>
                </ul>
            </li>

我希望通过javascript将值为'active'的class属性添加到特定的<li>元素

在我的javascript中，我有一个变量my_url。

如果my_url匹配简单<li>的href说...“/ Campaign / CreateCampaignUrl”，那么我希望<li>看起来如下，li元素有class =“active”.. < / p>

<li class="active">
                    <a href="/Campaign/CreateCampaignUrl">
                        <i class="fa fa-th"></i> <span>Campaign Url</span>
                        <small class="label pull-right bg-green">new</small>
                    </a>
                </li>

否则，如果复杂的<li>匹配..

<li class="treeview active">
                    <a href="#">
                        <i class="fa fa-files-o"></i>
                        <span>Classify Events</span>
                        <span class="label label-primary pull-right">4</span>
                    </a>
                    <ul class="treeview-menu">
                        <li class="active"><a href="/ClassificationUI/ClassifyStandardEvent"><i class="fa fa-circle-o"></i> Standard Events</a></li>
                        <li><a href="/Campaign/ClassifyCampaignProperties"><i class="fa fa-circle-o"></i> Campaign Properties</a></li>
                    </ul>
                </li>

在这种情况下，活动值会在两个地方附加到类中。

a）在上面的例子“/ ClassificationUI / ClassifyStandardEvent”中有一个与my_url匹配的url的li元素。

b）具有class =“treeview”的主要li元素现在有class =“treeview active”

真诚感谢所有帮助

由于

Answer 1

既然你最初没有提到你正在使用jQuery我会给你一个vanilla javascript答案：

您要做的是选择菜单中的所有链接并逐个浏览。对于您希望通过parentNodes向上遍历的每个链接，直到它与菜单元素匹配，并将活动类添加到"LI" var my_url = '/ClassificationUI/ClassifyStandardEvent'; var menu = document.getElementsByClassName('sidebar-menu')[0]; var links = menu.getElementsByTagName('a'); function highlight(linkEl) { var el = linkEl; do { el = el.parentNode; if (el.tagName === 'LI') el.className += ' active'; } while (el !== menu); } var i, linkEl; for (i = 0; i < links.length; i += 1) { linkEl = links[i]; if (linkEl.getAttribute('href') === my_url) { highlight(linkEl); // break here to stop at first match } }的任何元素。

var my_url = '/ClassificationUI/ClassifyStandardEvent';

var $menus = $('.sidebar-menu');

$menus.each(function (i) {
  var $menu = $menus.eq(i);
  var $links = $menu.find('a[href="' + my_url +'"]');

  $links.each(function (i) {
    var $link = $links.eq(i);
    $link.parentsUntil($menu ,'li').addClass('active');
  });
});

小提琴：https://jsfiddle.net/96y4nzvm/4/

这将突出显示所有匹配链接的订单项，但如果您想将其限制为第一个匹配，则可以在底部for循环中的if内部抛出一个中断。

编辑：由于您已将jQuery添加到标签列表中，因此我的jQuery解决方案也是如此（相同的概念）：

class Picture < ActiveRecord::Base
  belongs_to :imageable, polymorphic: true
end

class Employee < ActiveRecord::Base
  has_many :pictures, as: :imageable
end

class Product < ActiveRecord::Base
  has_many :pictures, as: :imageable
end

jQuery小提琴：https://jsfiddle.net/96y4nzvm/7/

jQuery解决方案的另一个好处是能够跨多个菜单工作（例如，一个显示桌面宽度，另一个显示移动宽度）。

Answer 2

你可以遍历所有li元素并搜索具有匹配href的子元素，假设是jQuery：

var my_url = '/ClassificationUI/ClassifyStandardEvent';

$('.sidebar-menu>li').each(function(){
  var add_active = false;
  $(this).find('a').each(function(){
    if ($(this).attr('href') == my_url){
        if (!add_active) {
        add_active = true;
      }
    }
  });
  if (add_active) {
    $(this).addClass('active');
  }
});

编辑：更新的代码

Answer 3

您只需使用选择器选择正确的元素并添加active类：

// Simple
$("ul.sidebar-menu > li").find("a[href='/Campaign/CreateCampaignUrl']")
        .parent("li").addClass("active");
// Complex
var $aSelector = $("ul.sidebar-menu > li.treeview > ul.treeview-menu > li")
        .find("a[href='/ClassificationUI/ClassifyStandardEvent']");

$aSelector.parent("li").addClass("active");
$aSelector.closest("li.treeview").addClass("active");

Demo

简单选择器会找到带有href a的{{1}}标记，然后转到父/Campaign/CreateCampaignUrl并应用li类。

复杂选择器我们首先找到active a下的/ClassificationUI/ClassifyStandardEvent元素。然后，我们将活动类添加到直接父.treeview-menu，并li添加到active类li的祖先。

Answer 4

这应该适用于简单和简单;复杂场景（甚至嵌套）。

//var my_url = '/Campaign/CreateCampaignUrl';
var my_url = '/Campaign/ClassifyCampaignProperties';
var $menu = $('.sidebar-menu');
var addActiveClass = function(index, elem) {
  var activeClass = 'active';
  var $link = $(elem);
  var linkSrc = $link.attr('href');
  var $parent = $link.parent();
  var $treeViewParent = $link.closest('.treeview');
  if (linkSrc && linkSrc.indexOf(my_url) !== -1) {
    $parent.addClass(activeClass);
    if ($treeViewParent.length) {
        $treeViewParent.addClass(activeClass);
    }
  }
};

// Simple & Complex
$.each($menu.find('a'), addActiveClass);

Demo

Nested Demo

基于某些条件javascript向html元素添加类属性

4 个答案: