CODEWITHSUNDEEP
javascriptjqueryhtml
Learning
Learning

Reputation: 20041

Find an a anchor with matching url and addclass using jquery

I need to highlight parent item and child item in nav, I am returning url as an array based on page.

My basic Nav structure is like this 

<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>

Javascript Array with url that need to be highlited.

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

How can i find matching url and and active-menu class to this anchor element in a particular nav.

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

Upvotes: 1

Views: 926

Answers (2)

Tushar
Tushar

Reputation: 87233

You need to create an attribute-value selector.

As there are multiple elements in the array, you can use join to create a selector for all the links instead of looping over array and selecting the elements one by one.

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

By using above statement the selector created is as follow:

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

Which can then be passed to jQuery to select the elements form DOM.

Here's updated Pen: 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>

UPDATE:

Answering to the comment

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

You can use find inside the header element

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

Upvotes: 3

M&#225;t&#233; Eke
M&#225;t&#233; Eke

Reputation: 131

You need something like this:

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

Upvotes: 0

Related Questions