Looking at href values of children
Hello!
I am trying to apply a specific class to an ID if the href values of any of the children are equal to the current URL, in this case a list of links in a menu. Here is a part of the relevant HTML and the jquery code I am trying. Any help will be greatly appreciated!!
- <!-- notice the ID on the li - "aboutsection" -->
- <ul id="mainnav" class="nav navbar-nav">
-
- <!-- About -->
-
-
- <li class="dropdown jsb-fw" id="aboutsection"><a href="#"
- data-hover="dropdown" data-delay="100" data-close-others="false"
- class="dropdown-toggle">About</a>
- <ul class="dropdown-menu">
-
- <li class="grid-output">
-
- <div class="row">
-
- <div class="col-sm-3 about">
-
- <h3 class="menuHeading">About US</h3>
- <ul>
- <li><a
- href="http://localhost:8500/mysite/pagetestcurrent.cfm">About this page</a></li>
- <li><a
- href="http://localhost:8500/mysite/anotherpage.cfm">About another page </a></li>
-
- </ul>
- </div>
- </div>
- </li>
- </ul>
- </li>
- </ul>
- <!-- if we are on any of the pages in the dropdown menu (which would
- be either'pagetestcurrent' or 'anotherpage' as in the example above as
- children of the about section), put a currentTab class on the above li
- with the ID 'aboutsection'-->
- The jquery I am trying is this, but no luck -
- <script>
- $('#aboutsection a').filter(function(){
- var currentURL = window.location.href;
-
- if
- (
- currentURL == $(this).children('a').attr('href')
- )
- {
- $('#aboutsection').addClass('currentTab');
- }
-
- )};
- </script>