javascript - 使用 jquery 查找具有匹配 url 和 addclass 的 anchor

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/',]";

我如何在特定导航中找到与该 anchor 元素匹配的 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>

---

更新:

回复评论

how can i target header menu only as i have similar footer menu also and it changes that also which i dont want

您可以在 header 元素内使用find

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