JQuery-UI вкладки: помехи между вкладками

Question

Я использую виджет вкладок jQuery-ui в качестве навигации. Содержимое всех вкладок загружается через ajax. Кажется, что есть помехи между вкладками. Я имею в виду, например, если на странице page1 в tab1 есть элемент с идентификатором foo, а на странице page2 в tab2 есть элемент с таким же идентификатором. И на обеих страницах есть код javascript для управления элементом с идентификатором foo, тогда произойдут странные вещи.

Как справиться с этой ситуацией?

Answer 1

Вы имеете дело с этим, имея уникальные идентификаторы, то есть после всех точек идентификаторов. :) Что касается селекторов jQuery, да, вы можете уточнить, какой из элементов вы имеете в виду, как объясняет Bayard Randel , но в целом это опасная практика. По личному опыту я обнаружил, что в конце концов это укусит вас - где-то, так или иначе, вы забудете, что у вас есть дубликаты ID. Просто избегай их.

Answer 2

Поскольку вы используете jquery, вы можете выбрать нужный элемент, используя селекторы на основе имени вашей вкладки.

например. если разметка выглядит так:

<div id="tabs">
  <div id="tabs-1">
    <a href="#" id="linkId">blah</a>
  </div>
  <div id="tabs-2">
    <a href="#" id="linkId">blah</a>
  </div>
</div>

вы можете специально выбрать вторую ссылку с помощью этого селектора, несмотря на дублирование идентификатора:

$("#tabs-2 #linkId").whatever();