使用ID或“相对路径”连接到JS函数的链接更好吗？

你知道演习......说你有一个链接和相应的div列表。你想在链接被点击时显示div - 所以你想获得对div的引用，这样你就可以在链接上挂钩一个事件。使用ID或“相对路径”连接到JS函数的链接更好吗？

当你设置你的事件，是它更好地使用唯一的ID挂钩一样东西：

<a href="#" id="link123">Foo</a> 
... 
<div style="display: none;" id="div123"/>

，或者使用某种parent.childnodes的“相对路径”走DOM并从a得到正确的参考div？

为了本示例的目的，假设目标div是从链接中DOM中删除的几个级别。 Javascript库完全是犹太教，特别是YUI（但都欢迎）。

来源

2009-04-10 andrew

你的第一个建议似乎是最简单的。如果您动态生成页面，则可以轻松确保所有对都匹配。

为什么不能做这样的事情：

<a href="#div123">Foo</a> 
... 
<div style="display: none;" id="div123"/>

，以便它会降低更优雅？

如果您需要更多关于原始问题的说服力，DOM遍历操作往往比简单的getElementById（）更昂贵（计算上）。

希望这会有所帮助。

来源

2009-04-10 19:47:53

如果您的链接和选项卡窗格的顺序相同，一个简单的方法是查找索引与已激活链接的索引相匹配的窗格相对于元素的父节点。这很容易带着几分的jQuery来完成：

<div id='nav'> 
    <a href='#'>Tab 1</a> 
    <a href='#'>Tab 2</a> 
    <a href='#'>Tab 3</a> 
</div> 

... 

<div id='tabs'> 
    <div>Contents of tab 1</div> 
    <div>Contents of tab 2</div> 
    <div>Contents of tab 3</div> 
</div> 

... 

<script type='text/javascript'> 
    $(function() { 
    var $nav = $('#nav a'), $tabs = $('#tabs > div'); 
    $tabs.gt(0).hide(); 
    $nav.click(function() { 
     $tabs.hide().eq($nav.index(this)).show(); 
     return false; 
    }); 
    }); 
</script>

来源

2009-04-10 20:35:52 jaz303

我喜欢使用在线锚标记这一点，它工作得很好，如果JavaScript和CSS关闭额外的好处。

<a href="#div-123">Foo</a> 
<a href="#div-124">Bar</a> 
<a href="#div-125">Baz</a> 

<style type="text/css"> 
#hiddenDivs div { 
    display: none; 
} 
</style> 

<div id="hiddenDivs"> 
    <div> 
     <a name="div-123"></a> 
     Some stuff in here for Foo 
    </div> 

    <div> 
     <a name="div-124"></a> 
     Some stuff in here for Bar 
    </div> 
    <div> 
     <a name="div-125"></a> 
     Some stuff in here for Baz 
    </div> 
</div> 

<script type="text/javascript"> 
jQuery("a[href~='#div-']").click(function(){ 
    // extract the name of the anchor 
    var id = $(this).attr('href').split('#')[1]; 
    jQuery('#hiddenDivs div').hide(); 
    jQuery('div:has(a[name='+id+'])').show(); 
    return false; 
}) 
</script>

来源

2009-04-10 21:50:48 artlung

使用ID或“相对路径”连接到JS函数的链接更好吗？

回答

相关问题