How to make a menu link active using javascript/jQuery?_问答_开发者

I have a static menu in a common header file. Whenever I visit any of the pages by clicking on the links in the menu, I need an image over that clicked link as an indicator of the activated link.

below is the HTML of menu I am using

<ul id="in-menu">
    <li><a href="unleashing-your-heart" >home</a></li>
    <li><a hr开发者_开发百科ef="fromdaniella" >from Daniella</a></li>
    <li><a href="material-list" >material list</a></li>
    <li><a href="program" >program</a></li>
    <li><a href="testimonials-2" >testimonials</a></li>
    <li><a href="#">login</a></li>
</ul>

How to use jQuery or javascript to make the desired functionality work?

You don't need javascript/jQuery for this

What you can do is to give each of your pages a unique ID or Class on the <body> element or main container div somewhere near the top of the the HTML structure anyway.. then give each of the links in your menu a unique ID or class too (if using classes they can be the same as the first one)

e.g.

<body class="nm-unl">
   <ul id="in-menu">
     <li class="nm-unl"><a href="unleashing-your-heart" >home</a></li>
     <li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li>
     <li class="nm-mat"><a href="material-list" >material list</a></li>
     <li class="nm-pro"><a href="program" >program</a></li>
     <li class="nm-tes"><a href="testimonials-2" >testimonials</a></li>
     <li class="nm-log"><a href="#">login</a></li>
   </ul>
</body>

So on your Home page the body class might be nm-unl and your login page would have body class nm-log etc.. the menu itself never changes so it can still be in a common file

Then in the CSS each link can be specifically targeted.. so say your plain link does not have an image, but the :hover and your "current" pages do

#in-menu a {background: none;}

#in-menu a:hover {background: url(image.png) no-repeat top center;}

Then you would group the new/specific selectors into the hover rule selectors, those rules are then more specific than the ordinary #in-menu a {} rule, and also they will only ever apply to your "current page link" i.e. when the two classes are the same on a page

.nm-log #in-menu .nm-log a,
.nm-tes #in-menu .nm-tes a,
.nm-pro #in-menu .nm-pro a,
.nm-mat #in-menu .nm-mat a,
.nm-dan #in-menu .nm-dan a,
.nm-unl #in-menu .nm-unl a,
#in-menu a:hover {background: url(image.png) no-repeat top center;}

You still need the #in-menu ID in the selector as well as the two classes because otherwise the selector will not have enough weight to override the default rule

A jQuery solution would work in a similar way, the logic would be the same. You would still need a unique page indicator i.e. a body class or ID then you would check the body ID/Class and add a current class to the relevant, matching link.

Here is a jquery based solution:

1) identify each page some how

2) match that id against your menu items

3) change the css accordingly

<script>
    pageID = $('#pageID').val();
    $( "li" ).each(function( index ) {
        listItemText = $(this).html();
        listItemText = listItemText.toLowerCase();

        if(listItemText == pageID)
            {
                $(this).css('color','red');
            }
    });
</script>

<style>
    li{
        color:green;
    }
</style>

<input type="hidden" id="pageID" value="contact" />

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
</ul>

http://jsfiddle.net/CnEsF/

There are a lot of ways to do each of these steps, hence the style of my answer. Each step can be executed differently. Id'ing the page might involve the use of a hidden input or some other DOM element, or parsing the URL. Matching would require you to standardize the your script so that your conditional doesn't fail... I used a lowercase method but there are other ways. Finally changing the CSS can be done by assigning a new class that already has the styles, modifying the DOM using jquery, or even assigning the correct class when building the page with PHP.

Hopefully this helps