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

Question

我需要在导航中突出显示父项和子项，我将 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 类。

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

Answer 1

您需要创建一个attribute-value 选择器。

由于数组中有多个元素，您可以使用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");