I'm using simple script to handle tab menu like this:
HTML:
<nav id="personal">
<ul class="clearfix">
<li id="personal-info">Info</li>
<li id="personal-orders">Orders</li>
<li id="personal-models">Models</li>
<li id="personal-balance">Balance</li>
</ul>
</nav>
<div id="personal-content"></div>
and CoffeeScript:
jQuery ($) ->
class Nav
constructor: (@elements) ->
self = @
wHash = document.location.hash.replace("#", "") or "info"
# activate element by location hash
@.activate document.getElementById "personal-#{wHash}"
# bind element activation on click
elements.click ->
self.activate @
activate: (elem) ->
@elements.removeClass "active"
$(elem).addClass "active"
# set a proper hash
wHash = elem.id.split("-")[1]
document.location.hash = "##{wHash}"
# load proper content into an inner section
# it works very fast and is the reason i use this type of navigation in the first place
$("#personal-content").load "/user/#{wHash}"
new Nav $("#personal").find("li")
This code works, but i'm pretty sure that it's very far away from best practices, and can be greatly improved, as these are my first tries in CoffeeScript. So the question is, can this code be beautified in some way?