Ideally you output this class from the server side, but if you can’t… Let’s say you have navigation like this: <nav> <ul> <li><a href=”/”>Home</a></li> <li><a href=”/about/”>About</a></li> <li><a href=”/clients/”>Clients</a></li> <li><a href=”/contact/”>Contact Us</a></li> </ul> </nav> And you are at the URL: http://yoursite.com/about/team/ And you want the About link to get a class of “active” so you can […]
Articles Tagged: Class
Toggle CSS Classes
Adding and removing CSS classes on HTML elements is another fairly common action. This is one technique you may consider with selected menu items, highlighted rows, or active input elements. This newer method is simply quicker than using .addClass() and .removeClass() where you can put all the code into one function call. $(‘nav a’).toggleClass(‘selected’);
Common Selectors
// get element by id $(“#ElementID”).whatever(); // get element by css class $(“.ClassName”).whatever(); // get elements where id contains a string $(“[id*=’value’]”).whatever(); // get elements where id starts with a string $(“[id^=’value’]”).whatever(); // get elements where id ends with a string $(“[id$=’value’]”).whatever(); // get all elements of certain type (can use “p”, “a”, “div” – […]
Add parent page slug to body_class
/*************************************************************** * Function body_class_section * Add the top level page to the body class for coloured sections ***************************************************************/ add_filter(‘body_class’,’body_class_section’); function body_class_section($classes) { global $wpdb, $post; if (is_page()) { if ($post->post_parent) { $parent = end(get_post_ancestors($current_page_id)); } else { $parent = $post->ID; } $post_data = get_post($parent, ARRAY_A); $classes[] = ‘section-‘ . $post_data[‘post_name’]; } return $classes; } This […]