CODEWITHSUNDEEP
javascriptjqueryaddclasswindow.location
user983248
user983248

Reputation: 2688

if href=url change / add class to parent element

I'm bulding a small menu and I need the help of jQuery to add or replace a class of a menu item if a sub-menu item is currently viewed.

<div id="menu">    
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page.html">Page</a>
            <ul>
                <li><a href="sub-page-1.html">Page 1</a></li>
                <li><a href="sub-page-2.html">Page 2</a></li>
                <li><a href="sub-page-3.html">Page 3</a></li>
            </ul>
          </li>
    </ul>
</div>

So basically if a sub-menu item is currently viewed (ul li ul li) I must add a class to its parent menu item (ul li).

I found here on the site a similar question but does not include the sub menu part and I'm clueless about jQuery.

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('ul#menuHov a[href$="' + window.location.pathname + '"]').addClass("menuHov"); 
});

Thanks a lot in advance

Upvotes: 1

Views: 1789

Answers (6)

user983248
user983248

Reputation: 2688

jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});

also can define #menu ul li ul li a

jQuery(document).ready(function() {
   jQuery('#menu ul li ul li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});

Upvotes: 1

Linus Gudn Jokela
Linus Gudn Jokela

Reputation: 96

IF you have example $_GET['page']=="food"

you will check in the url with something like this

function getUrlVars() {
   var vars = {};
   var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
   function(m,key,value) {
   vars[key] = value;
   });
   return vars;
}

Then you could have an ID on the menuitems

<li id="food">Food</li>

Then how to get the page.

var page = getUrlVars()["page"];

if (page){
    var currPage = $("#"+page);
    currPage.css({"background":"#eeeeee","color":"#000000"});

}else{
    console.log("No page defined!");
}

Upvotes: 0

Polmonite
Polmonite

Reputation: 943

If you want to add the class only to parent items with sub-menu items (one time when the page load) you can simply do:

$('ul li ul').parent().addClass('children-viewed');

If you want to add the class when the sub-menu item is hovered you can do:

$('ul li ul li').hover(function(){
    $(this).parent().parent().addClass('viewed');
},function(){
    $(this).parent().parent().removeClass('viewed');
});

If you want to add the class when the sub-menu items are showed (for example when hovering their parent's item) you can do:

$('ul li').hover(function(){
    $(this).addClass('viewed');
    // show sub-menu items
},function(){
    $(this).removeClass('viewed');
    // hide sub-menu items
});

If with "currently viewed" you mean something else, please explain what you mean.

PS: sorry for my bad english.

EDIT:

Now I understand :) . Then you can do:

$('ul li ul li').each(function(){
    var rx = new RegExp($(this).children('a').attr('href')+"$");
    if(rx.test(window.location.pathname)){
        $(this).parent().parent().addClass("menuHov");
    }
});

or, if you don't like loops:

var curr_url = window.location.pathname;
var currently_viewed = curr_url.substr(curr_url.lastIndexOf("/")+1);
$('ul li ul li a[href$="'+currently_viewed+'"]').parent().parent().parent().addClass("menuHov");

Upvotes: 1

tolgaio
tolgaio

Reputation: 3246

You can use jQuery .is() function. Try something like that

$('ul li ul li').is('.open')

And add .open class identifier to the ul li ul li when hover by using addClass('.open')

More info Here

Upvotes: 0

Man Programmer
Man Programmer

Reputation: 5356

document).ready(function() {
   $('li a').addClass("menuHov");
 var lastVisited =  document.referrer;//it can return last url
   $('li ul li a').find('href='+lastVisited).addClass("className");  
});

Upvotes: 1

Genosite
Genosite

Reputation: 359

Try this :

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent('li').addClass("menuHov"); 
});

Upvotes: 3

Related Questions