How can i change the css class based on keywords in url with jquery

Question

I have the navigation bar as below

<ul>
  <li class="selected"><a href=">My Profile</a></li>
  <li><a href="">xxxx</a></li>
  <li><a href="">mybook</a></li>
  <li><a href="">Photos <span>4</span></a></li>
  <li><a href="">Profile List</a></li>
</ul>

I want that if the url is www.abc.com/user/profile then profile tab class should have class selected attached

If photos then photo tab.

If we can have partial match that will be good but i am not sure if thats possible

like in url i have /user/book and myBook gets selected

Are you asking about how to write a jquery selector for that? What about using something like if ( .attr("href") == "your URL") { ... — twsaef
– twsaef, Commented Jul 31, 2012 at 2:26

Danil Speransky · Accepted Answer · 2012-07-31 02:41:08Z

2

Some elegant variant:

<ul class="menu">
  <li><a class="profile" href="/user/profile">My Profile</a></li>
  <li><a class="book" href="/user/book">My Book</a></li>
</ul>

$(document).ready(function () {
  var page = document.location.href.split('/').slice(-1)[0];
  $('.menu .' + page).addClass('selected');
});

edited Jul 31, 2012 at 2:41

answered Jul 31, 2012 at 2:35

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elclanrs · Accepted Answer · 2012-07-31 02:29:29Z

0

You can grab the part you want with regex:

var userPage = /user\/(.+)/.exec(location.href)[1];

That will give you the part after user/. Then you could use a switch statement:

switch (userPage) {
  case 'profile':
    ...
    break;
  case 'book':
    ...
    break;
}

answered Jul 31, 2012 at 2:29

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

1 Comment

Mirage Over a year ago

can't i use anything like if(href contains keyword) then return true rather than splitting the urls

Austin · Accepted Answer · 2012-07-31 02:44:40Z

You would want to switch off of location.pathname. Granted that you give that <ul> a class of nav:

$(function () {
    if (location.pathname.search("/user/profile") != -1) {
        // page is /user/profile
        $("#nav li").eq(0).addClass("selected");
    } else if (location.pathname.search("/user/photos") != -1) {
        // page is some/thing
        $("#nav li").eq(3).addClass("selected");
    }
    ... etc
});

Things to notice

We use $(function () {...}); as opposed to $(document).ready(function() {...});. It is less typing and more efficient
We use String.search(), which returns the index at which the string "/user/profile" appears. If the string is not found, String.search() will return -1, so if it != -1, it exists.
We also use jQuery.eq( index ) this treats elements selected by a jQuery selector as an array and returns the element of the specified index.

References

Check out jQuery's .eq here, and JavaScript's String.search here

Collectives™ on Stack Overflow

How can i change the css class based on keywords in url with jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related