CODEWITHSUNDEEP
javascriptjqueryhtmlcsssharepoint-2010
Dev P
Dev P

Reputation: 1187

jQuery to add a class to menu items?

I have the following menu items:

<ul>
    <li class="static">
        <a class="static menu-item" href="/mySites/AboutUs">About Us</a>
    </li>
    <li class="static">
        <a class="static-menu-item" href="/mySite/Practices">Practices</a>
    </li>
    <li class="static">
        <a class="static-meunu-item" href="/mySite/Sectors">Sectors</a>
    </li>
</ul>

I cannot add specific background images to the menu items as they all have the same class. In order to achieve this it will be ideal if specific classes could be added for example:

<ul>
    <li class="static">
        <a class="static menu-item about-us" href="/mySites/AboutUs">About Us</a>
    </li>
    <li class="static">
        <a class="static-menu-item practices" href="/mySite/Practices">Practices</a>
    </li>
    <li class="static">
         <a class="static-meunu-item sectors" href="/mySite/Sectors">Sectors</a>
    </li>
</ul>

In the above example highlighted in red are the classes that have been added. This will then allow me to add the specific background images to each menu item.

How can I achieve this using the .addClass() method in jQuery?

Upvotes: 3

Views: 2016

Answers (6)

quik_silv
quik_silv

Reputation: 2437

Overkill or not, sometimes we may just want to test out ideas quickly on the browser, or you might be working on nodejs. I have edited the link classes to static-menu-item.

var links = $("body").find("a.static-menu-item");
$.each(links, function(value) {
    var items = $(this).attr('href').split("/");
    $(this).addClass(items[items.length-1].toLowerCase() );
});

Working example

Upvotes: 0

peduarte
peduarte

Reputation: 1677

I personally find it overkill to do such things with Javascript. Makes more sense doing it server side as it's been mentioned above. Or... CSS! You could use CSS3 pseudo classes to do this. I have created an example here

To make this work in older browsers such as IE7, make sure you add Selectivizr to your head section

Upvotes: 0

Prusprus
Prusprus

Reputation: 8055

It's not necessarily overkill specifying individual classes for each list item. A class should be used (as opposed to an ID) when there is even a possibility to group multiple elements together (for scripting, styling). In your case, as this is a navigation menu, you might have multiple menus (such as a left-side pane side bar, a footer menu aswell). From my experience, I would specify each menu button as its own class in order to handle the group of links together (ie all links that directs the user to the About us page).

The most obvious benefit of this is that you will be able to handle the active links as a group vs. individually; just as you would have a hover color on these links, you might as well want the link to be bold when the user is on that specific page. Grouping the links together and handling this as a class would allow you to bold all the links if you have multiple menus.

To add to this, erimerturk had a good idea of specifying highlights or 'themes' within your styles. This is a good practice (although not for your case) when you want to specify a certain color scheme for your site. Specify your color, background color and highlights as classes and tag these classes to the required elements within your html directly. This is a huge boost for maintainability and scalability, so although I wouldn't say as far as saying it's good practice, it's certainly not bad practice as far as I'm concerned.

Upvotes: 0

James Hill
James Hill

Reputation: 61793

In this case, adding specific classes is overkill. I would simply use an href selector since that seems to be what you're basing your classes off of:

// *= indicates contains
$('a[href*="AboutUs"]').addClass("about-us");
$('a[href*="Practices"]').addClass("practices");
$('a[href*="Sectors"]').addClass("sectors");

If there are other anchors on the page with the same href's that you don't want to include, simply use the parent > child selector:

// *= indicates contains
$('.static > a[href*="AboutUs"]').addClass("about-us");
$('.static > a[href*="Practices"]').addClass("practices");
$('.static > a[href*="Sectors"]').addClass("sectors");

Here is a working jsFiddle to illustrate the solution.

Upvotes: 2

erimerturk
erimerturk

Reputation: 4288

define your class like this;

.highlight { background:yellow; }
.highlight2 { background:yellow; }
.highlight3 { background:yellow; }

then add your class like this;

$(".about-us").addClass("highlight");
$(".practices").addClass("highlight2");
$(".sector").addClass("highlight3");

Upvotes: 0

ipr101
ipr101

Reputation: 24226

You should be able to add a class by passing a callback function to the addClass function - 

$("a").addClass(function() {
  var newclassname = $(this).text().toLowerCase();
  return newclassname.replace(/ /g,'-');
})

Demo - http://jsfiddle.net/aZEZN/

Upvotes: 1

Related Questions