导航栏 - 脚本解释

Question

我知道这是令人尴尬的...但是有人能够解释我脚本是一行一行吗。

$(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(); 

Answer 1

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

当有人点击页面上的任何地方，检查的目标是一个锚标记（<a>）直接低于<li>一个<ul>的元素中与类ui-navbar内。

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

$(this)现在是锚标记 - 该脚本将在DOM树类ui-navbar找到最接近的元素和DOM树下的所有锚标签删除类ui-navbar-btn-active。

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

然后它会将类ui-navbar-btn-active添加到用户点击的锚点标记。

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

这假定锚标签具有称为data-href的属性相匹配的另一元件的ID。例如，用户只需点击<a href="http://www.google.com" data-href="google">Google</a>，脚本想要找到<div id="google">whatever</div>。如果找到元素，它会显示它（jQuery倾向于将css设置为display:block），然后获取DOM树中所有类型为content_div的同级元素并隐藏它们（display:none）。

本质上发生了什么是该页面有一些导航链接 - 无论你点击哪一个获得一个活跃的类，所有其他的导航链接失去了他们的。然后，它会显示用户希望看到特定于该导航链接的一些内容，并隐藏可能从以前的点击中看到的任何其他内容。