jQuery - Maintain Current Page after POST

I want to change the background-color for the last menu item clicked in the site navigation menu. I'm looking for a way to maintain the page index. I could use a query parameter. I don't want this to clutter up my URL. I think jQuery will do the trick.

Here's where I am at

    $(document).ready(function () {
        $('.MenuLink').click(function () {
            //alert('clicked');
            $(this).css("background-color", "#FFFF00");
            //$(this).css("background-image", "url(/myimage.jpg)");
        });
    });

    <div class="MenuBar">
        <div><a class="MenuLink" href="/?Length=4">Main</a></div>
        <div><a class="MenuLink" href="/Link2">Link 2</a></di开发者_运维百科v>
        <div><a class="MenuLink" href="/Link3">Link 3</a></div>
        <div><a class="MenuLink" href="/Link4">Link 4</a></div>
        <div><a class="MenuLink" href="/Link5">Link 5</a></div>
        <div class="LastMenuItem MenuLink"><a href="/Link6">Link 6</a></div>
    </div>

What do you suggest?

The correct way to do this is using your language in server-side (I don't know what language is):

This is not jquery responsibility.

Create a cssClass

.activeMenu { background:color: #FFFF00 }

and in your HTML you cant put this:

<div class="MenuBar">
    <div><a class="MenuLink <%=verifyActiveMenu('Main')%>" href="/?Length=4">Main</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link2')%>" href="/Link2">Link 2</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link3')%>" href="/Link3">Link 3</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link4')%>" href="/Link4">Link 4</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link5')%>" href="/Link5">Link 5</a></div>
    <div class="LastMenuItem MenuLink <%=verifyActiveMenu('Link6')%>"><a href="/Link6">Link 6</a></div>
</div>

and in your server-side language:

string verifyActiveMenu(string menu) {
    if (someMethodToGetUrl.toString().contains(menu)) {
        return "activeMenu";
    }

    return "";
}

Looks like you're looking for AJAX GET instead of the regular get requests your links produce?

Try this:

$(document).ready(function () {
    $('.MenuLink').click(function (e) {
        e.preventDefault();
        $(this).css("background-color", "#FFFF00");
          $.get($(this).attr('href'), function(response){
             // Do something with the response, which is whatever your links
             // return (probably HTML, right?)
          })
    });
});

Firstly, you should return false from your click function so that you do not follow the link (I am assuming you do not want to follow the links). Secondly, you can use the href itself to pass the background color to the click function. No AJAX is required. You can do this with javascript.

Try a return false; at the end of your click function definition. Since you put a onClick event on an anchor tag the browser needs to stop the event propagation.

$(document).ready(function () {
    $('.MenuLink').click(function () {
        //alert('clicked');
        $(this).css("background-color", "#FFFF00");
        //$(this).css("background-image", "url(/myimage.jpg)");
        return false; //important!
    });
});

I am assuming you are doing a full get on the page and not looking for a ajax solution.

You can try this.

 $(document).ready(function () {
            $('.MenuLink').click(function () {
                //alert('clicked');
                $(this).css("background-color", "#FFFF00");
                //$(this).css("background-image", "url(/myimage.jpg)");
            });

            var link = window.location.href;
            link = link.substring(link.lastIndexOf("/"));

            if(link){
               link = link.toLowerCase();
               $("div.MenuBar > div").each(function(){
                  if(link === $(this).find("a").text().replace(" ", "").toLowerCase()){
                      $(this).css("backgroundColor", "setTheColorHere");
                  }
               });
            }
            else{
                $("div.MenuBar > div:first").css("backgroundColor", "setTheColorHere");
            }
    });