javascript - Nav Bar - Script explain -

javascript - Nav Bar - Script explain -

i know embarrassing... can 1 explain me script line line.

$(document).delegate('.ui-navbar ul li > a', 'click', function () { $(this).closest('.ui-navbar').find('a').removeclass('ui-navbar-btn-active'); $(this).addclass('ui-navbar-btn-active'); $('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();

$(document).delegate('.ui-navbar ul li > a', 'click', function () {

when clicks anywhere on page, check if target anchor tag (<a>) straight below <li> within <ul> within element class ui-navbar.

$(this).closest('.ui-navbar').find('a').removeclass('ui-navbar-btn-active');

$(this) anchor tag - script going find closest element class ui-navbar in dom tree , remove class ui-navbar-btn-active anchor tags beneath in dom tree.

$(this).addclass('ui-navbar-btn-active');

then add together class ui-navbar-btn-active anchor tag user clicked on.

$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();

this assumes anchor tag has attribute called data-href matches element's id. example, user clicked on <a href="http://www.google.com" data-href="google">google</a> , script wants find <div id="google">whatever</div>. if finds element, show (jquery prefers setting css display:block this) , grab sibling elements in dom tree have class of content_div , hide them (display:none).

essentially going on page has nav links - whichever 1 click on gets active class, , other nav links lose theirs. shows content user expects see specific nav link, , hides other content may visible previous click.

javascript jquery html css nav