如何通过更改菜单上的图像来突出显示当前页面？

Question

This is one of the lines in my div nav:

<a href="/Home/ShoppingCart"><img class="swap5" src="/Static/Images/Meny_normal_06.png"  alt="" /></a>

When someone click on this image they will get redirected to another page and I want this image to get swapped to my other image that is darker which highlights the current page.

to

<--- highlighted one that I want to change to while its current page

Here is my Jquery:

<script type="text/javascript">
        $(document).ready(function () {
            $('.swap5').click(function () {
                $(this).attr('src', '/Static/Images/Meny_clicked_01.png');


         });  
        });
</script

>

I realized that this wont do it, beacuse the new image is gone by the time i get redirected to the other page..

How can I do this in a smooth way? I am using MVC 3 btw

any kind of help is appreciated

Answer 1

You can use plain javascript to achieve that. Give the image element an id, let's say "me". do something like document.getELmentById("me").setAttribute("src", "link to your other image"); the

Answer 2

You can use a cookie in such cases.. As soon as the button is clicked you can store that info in a cookie.

In the next page check the cookie , if the value you expect was stored then replace the new image on the redirected page..

Answer 3

What about running this on the view you are redirecting to instead of the page you are redirecting from?

<script type="text/javascript">
    $(document).ready(function () {
        $('.swap5').attr('src', '/Static/Images/Meny_clicked_01.png');
    });
</script>

Answer 4

Forget about jquery, i can do it using css.

Use an .active class on the current page.

Ex:-

1. Define a class

   .active{background:url(/image/activemenu.jpg);}

2. Use the class on the current page to highlight the nav.

   li> class="active"> a href="#"> ORDER /a> /li>