CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3020422
user3020422

Reputation: 47

How to keep the selected menu active using jquery, when the user comes back to page?

I have a typical menu structure -

<Ul class="nav">
<li>Menu1</li>
<li>menu2</li>
-------
</ul>

When I click on certain menu, as per my jquery written on load of layout.html, it selects particular menu. 

<script>
    jQuery(function(){
      jQuery('.nav>li>a').each(function(){
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
  </script>

But on that page if I click on certain link which takes me on some other page and then when I come back the menu item does not remain selected.

How can I modify my jquery to achieve this? Thanks in advance !

Upvotes: 2

Views: 3861

Answers (9)

MKhalid
MKhalid

Reputation: 1

var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); 
$('.nav li').each(function () {
    if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
        $(this).addClass('active');
    }
});

Upvotes: 0

v.orujov
v.orujov

Reputation: 56

add lines below

<script>
    $(function(){
       $("a[href='"+window.location+"']").addClass("selected");
    });
</script>

Upvotes: 0

Kobbe
Kobbe

Reputation: 316

As SJ-B is saying, HTML5 Web Storage is a good solution.

If you don't intend to click more than one or two pages away from the page with your list menu, you could add a query to the link that takes you away form the page e.g. the id of one of your list menus.

href="somepage.html could become something like this href="somepage.html?menu_id=menu5

When using window.history.back(), you could then fish the id out of the URL using window.location.search and use id to select the list menu.

Upvotes: 1

Fruitbat
Fruitbat

Reputation: 774

I stumbled upon this when googling for something similar. I have a JQueryUI accordion menu. My menu is in an included script (classic asp), so it is on every page but I think it is a similar situation. I cobbled something together based on SJ-B's answer (don't know why it was down voted).

I have this:

function saveSession(id) {
    if (window.sessionStorage) {
        sessionStorage.activeMenu = $("#jqmenu").accordion("option", "active") ;
        sessionStorage.activeLink = id ;
    }
}

and this

$(function() {
  //give every li in the menu a unique id
  $('#jqmenu a').attr('id', function(i) {
        return 'link'+(i+1);
  });
  var activeMenu = 0;
  var activeLink = "";
  if (window.sessionStorage) {
    activeMenu = parseInt(sessionStorage.activeMenu);
    activeLink = sessionStorage.activeLink;
  }
  $("#" + activeLink).parent().addClass("selectedmenu");
  $("#jqmenu").accordion({collapsible: true, active: activeMenu, heightStyle: "content", header: "h3"});
  $("#jqmenu a").click(function() { saveSession($(this).attr('id')); });
});

OK, a bit untidy and cobbled together from various suggestions (I'm still learning), but it seems to work. Tried on IE11 and Firefox. Chrome can't find localhost but that's another story.

Upvotes: 0

SajjadHashmi
SajjadHashmi

Reputation: 3695

Well there could be many ways, on which is this which i like and always use: It works when you path name is same as your link name For e.g. yourwebsite.com/Menu1

function setNavigation() {
    var n = window.location.pathname,t;
    n = n.replace("/", "");
    t = $("ul li:contains(" + n + ")");
    t.addClass("active");
}

You can than define styling in your active class as you like.

Upvotes: 0

SJ-B
SJ-B

Reputation: 95

Try to use Session Object of HTML5.

sessionStorage.varName = id of selected item.

on load just check if the sessionStorage.varName has value or undefined, if not then get the value 

`var value = sessionStorage.varName;` and set it.

Upvotes: 0

user1636522
user1636522

Reputation:

I would do something like this :

<ul class="nav">
    <li id="home"><a href="#home">Home</a></li>
    <li id="contact"><a href="#contact">Contact</a></li>
</ul>

Javascript :

// http://mywebsite.com#home
// location.hash === '#home'
jQuery('.nav ' + location.hash).addClass('selected');

Upvotes: 0

Viken Patel
Viken Patel

Reputation: 446

You can use below code to achieve this. 

var lastele=siteurl.substring(siteurl.lastIndexOf("/")+1);
    jQuery(".nav>li> a").each(function(){
    var anchorhref=jQuery(this).attr("href");
    var finalhref=anchorhref.substring(anchorhref.lastIndexOf("/")+1);
    if(finalhref==lastele){
        jQuery(this).addClass("selected");
    }
});

Upvotes: 0

kapil_dev
kapil_dev

Reputation: 86

You can use simple css code. Use active attribute like

a:active
{
 //Some style
}

Upvotes: 0

Related Questions