Question

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

我的基本导航结构就像这样

<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");

使用jquery

2 个答案: