使用jquery查找具有匹配url和addclass的锚点

Question

我需要在nav中突出显示父项和子项，我将作为一个基于页面的数组返回url。

我的基本Nav结构是这样的

<div id="cssmenu">
   <div id="menu-button"></div>
   <ul>
      <li><a href="/en/about-us/">About Us</a></li>
      <li class="has-sub">
         <span class="submenu-button"></span><a href="/en/photo-gallery/">Gallery </a>
         <ul>
            <li><a href="/en/photo-gallery/" >Photo Gallery</a></li>
            <li><a href="/en/video-gallery/">Video Gallery</a></li>
            <li><a href="/en/instagram-gallery/">Instagram Gallery</a></li>
         </ul>
      </li>
      <li><a href="/en/news/">News</a></li>
      <li><a href="/en/contact/">Contact</a></li>
   </ul>
</div>

带有url的Javascript需要高级别。

var HighlightMenuItems = "['/en/islam/about-islam/','/en/islam/about-islam/',]";

如何在特定导航中找到与此锚元素匹配的url和和active-menu类。

代码示例http://codepen.io/anon/pen/XmMxbM?editors=101

Answer 1

您需要创建一个属性值选择器。

由于数组中有多个元素，所以可以使用join为所有链接创建一个选择器，而不是遍历数组并逐个选择元素。

'a[href="' + HighlightMenuItems.join('"], a[href="') + '"]';

通过使用上述语句，创建的选择器如下所示：

a[href="/en/about-us/"], a[href="/en/video-gallery/"]

然后可以将这些元素传递给jQuery，以选择DOM形式的元素。

以下是更新的钢笔：http://codepen.io/anon/pen/gamBPE

​

jQuery(document).ready(function() {
  var HighlightMenuItems = ['/en/about-us/', '/en/video-gallery/'];

  var menuSelector = 'a[href="' + HighlightMenuItems.join('"], a[href="') + '"]';

  $(menuSelector).addClass('active-menu');
});

.active-menu {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button"></div>
  <ul>
    <li><a href="/en/about-us/">About Us</a>
    </li>
    <li class="has-sub">
      <span class="submenu-button"></span><a href="/en/photo-gallery/">Gallery </a>
      <ul>
        <li><a href="/en/photo-gallery/">Photo Gallery</a>
        </li>
        <li><a href="/en/video-gallery/">Video Gallery</a>
        </li>
        <li><a href="/en/instagram-gallery/">Instagram Gallery</a>
        </li>
      </ul>
    </li>
    <li><a href="/en/news/">News</a>
    </li>
    <li><a href="/en/contact/">Contact</a>
    </li>
  </ul>
</div>

​

更新：

对评论的答复

如何只针对页眉菜单，因为我也有类似的页脚菜单，而且它也改变了我不想要的

可以在标头元素中使用find。

$('#cssmenu').find(menuSelector).addClass('active-menu');
// ^^^^^^^^ : Use parent selector here that will select only header

Answer 2

你需要这样的东西：

$("a[href=" + HighlightMenuItems[0] + "]").addClass("active-menu");