Question

你知道演习...说你有一个链接列表和相应的div。您希望在单击链接时显示div - 因此您希望获得对div的引用，以便您可以在链接上挂起事件。

当您设置活动时，最好使用以下唯一标识进行连接：

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

或者，使用某种parent.childnodes“相对路径”来遍历DOM并从a获得对div的正确引用？

为了本示例的目的，假设目标div是从链接中删除DOM中的几个级别。 Javascript库对此非常犹豫，特别是YUI（但欢迎所有人）。

Answer 1

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

为什么不这样做：

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

这样它会更优雅地降级吗？

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

希望这有帮助。

Answer 2

如果您的链接和选项卡窗格的顺序相同，则一种简单的方法是找到索引与激活链接的索引相匹配的窗格，相对于元素的父节点。这可以通过一些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>

Answer 3

我喜欢使用内联锚标签，如果关闭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>

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

3 个答案: