Лучше подключать ссылки на функцию JS, используя идентификаторы или «относительные пути»?

Question

Вы знаете упражнение ... скажем, у вас есть список ссылок и соответствующих div. Вы хотите показывать div при нажатии на ссылку - поэтому вы хотите получить ссылку на div, чтобы вы могли подключить событие к ссылке.

Когда вы настраиваете свои события, лучше подключать вещи с помощью уникальных идентификаторов, таких как:

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

или, чтобы использовать своего рода относительный путь parent.childnodes для обхода DOM и получения правильной ссылки на div из a?

Предположим, для целей этого примера, что целевой 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>