使用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函數的鏈接更好嗎？

回答

相關問題