CoffeeScript: Set active class for element based on URL

Hi, today I find another useful snippet by CoffeeScript for your sites.

I have a left side bar which has a list of my objects. Each of them element on the sidebar contains a link redirecting to another object. I wanna to set active class based on URL after reloading the site.

And, below is my snippet.

Hope it useful!

ready = ->
  setActiveElement = () ->
    ## using js regular expression to get id
    element_id = document.URL.match(/(\w*\/)([0-9]+)/); 
    if element_id ## in case user view the element
      element_id = element_id[0]

      ## Get element on view which have a href contains element_id    
      element = $("li:has(a[href$='"+element_id+"'])");
      element.addClass('active');

  setActiveElement(); ## call on load

$(document).ready(ready)
$(document).on('page:load', ready) ## reload js even setting turbolink
window.ready = ready

Published by

Colin Dao

I am a hardworking Rubyist in Hanoi, Vietnam

One thought on “CoffeeScript: Set active class for element based on URL”

Leave a comment