Такие кейсы были подробно рассмотрены в #163 Описанный в вашем случае HTML не подразумевает привязку по аттрибуту id. Сейчас подумаю.

Пока не понятно чем обусловлено разнесение табов и контента в разные блоки. Проблема решается общим блоком родителем. Соотносить таб с контентом можно через значение модификатора, например, также id

<div class="parent">
<div class="block1">
<a href=="#" class="block1__element block1__element_id_1">Tab 1</a>
<a href=="#" class="block1__element block1__element_id_2">Tab 2</a>
</div>
<div class="block2">
<div class="block2__elemnt block2__elemnt_id_1">Tab 1 content</div>
<div class="block2__elemnt block2__elemnt_id_2">Tab 2 content</div>
</div>
</div>

но я бы остановился на варинте с одним блоком

<div class="tab-panel">
<div class="tab-panel__tabs">
<a href=="#" class="tab-panel__tab tab-panel__tab_id_1">Tab 1</a>
<a href=="#" class="tab-panel__tab tab-panel__tab_id_2">Tab 2</a>
</div>
<div class="tab-panel__container">
<div class="tab-panel__content tab-panel__content_id_1">Tab 1 content</div>
<div class="tab-panel__content tab-panel__content_id_2">Tab 2 content</div>
</div>
</div>

А я бы все равно сделал блок для табов и намиксовал его на нужные дом ноды:

<div class="block1">
<a href=="#" class="block1__element tab tab_trigger i-bem" data-bem='{"tab":{"id":1,"ns":1}}'>Tab 1</a>
<a href=="#" class="block1__element tab tab_trigger i-bem" data-bem='{"tab":{"id":2,"ns":1}}'>Tab 2</a>
</div>
<div class="block2">
<div class="block2__elemnt tab tab_body i-bem" data-bem='{"tab":{"id":1}}'>Tab 1 content</div>
<div class="block2__elemnt tab tab_body i-bem" data-bem='{"tab":{"id":2}}'>Tab 2 content</div>
</div>

BEM.DOM.decl('tab', {
  onSetMod: {
    js : function () {
      this._tabs = this.__self.tabs[this.params.ns] = this.__self.tabs[this.params.ns] || [];
      this._tabs.push(this);

      this.bindTo(this.elem('trigger'), 'click', function () {
        this._tabs.forEach(function(tab) { tab.setMod('selected', false); });
        this.setMod('selected', true);
      });
    }
  }
}, {
  tabs: {}
})

.tab__body { display: none; }
.tab_selected.tab__trigger { border-bottom: 2px solid red; }
.tab_selected.tab__body { display: block; }

@tadatuta Крутой же блок, универсальный такой...

@zxqfox А он у тебя будет работать? Ведь из-за аттрибута id у тебя получится несколько инстансов блока tab. Соответственно и this у каждого свой. Хотя идею можно довести до конца. Про блок-микс я что-то не подумал сразу.

@Guria разные блоки могут быть нужны для того, чтобы переключатели и панели могли идти не подряд в DOM-дереве. для универсального блока это почти must-have.

@zxqfox да, вполне годно, только id нужно заменить на что-то другое.

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

@Guria 2 инстанса по 2 дом ноды в каждой, + статическая сборка всех табов для разных ns — в данном случае оба таба сложатся в ns 1. соотв, при клике отключаем все табы в текущем ns (обе в ns 1) и проставляем текущему (по которому кликнули) модификатор «выбран».

да, вполне годно, только id нужно заменить на что-то другое.

Впрочем, я бы все-таки связывал переключатели и панели по одному id в js-параметрах

@tadatuta А я как написал? ;-)

upd А... Ну это как-то не универсально... И кода больше. А зачем заменять id?

@zxqfox у тебя инстанс из одного таба и одного контента, а в js ты каким то образом до других табов из других инстансов добираться собрался?

@Guria ну доработать можно — лив бинды, запоминание выбранного в статическом поле, и последующая модификация только его, а не всех, проверка на что кликаем, чтобы не перевыбирать и не трогать дом лишний раз, события для внешнего API, и т.д. ;-)

Имхо, смахивает на базовый блок.

в js ты каким то образом до других табов из других инстансов добираться собрался?

upd Таким

      this._tabs = this.__self.tabs[this.params.ns] = this.__self.tabs[this.params.ns] || [];
      this._tabs.push(this); // складываем все соседние

@zxqfox направление идеи понял и одобряю, но твою реализацию предлагаю испытать на практике.

@zxqfox на мой вкус — это оверинжиниринг. у тебя есть реальные жизненные примеры, когда нельзя гарантировать соответствие порядка переключателей и панелей? потому что, если их нет или незначительно мало, то реализация окажется сильно проще.

@tadatuta нууу, ты меня таким вопросом ставишь в тупик: 1) куда уж проще? 2) тут не только порядок важен, но и вложенность:

tab__trigger
div
  tab__trigger
tab__trigger
...
tab__body
tab__body
div
  tab__body

Явное, в данном случае (как и всегда), лучше неявного ;-)

предлагаю испытать на практике.

@Guria прошу ;-)

@tadatuta не совсем понимаю как можно 2 блока связать по id

ещё раз предлагаю ознакомиться с #163 4ый комментарий от @tadatuta

@serhioone Если мы говорим про i-bem.js, то см. https://ru.bem.info/technology/i-bem/v2/i-bem-js/#Один-js-блок-на-нескольких-html-элементах

Ознакомился с приведенными материалами. И не могу понять, как применить в следующей ситуации. Есть блок родитель. По клику с помощью ajax поддтягивается инфа, и с помощью client bh создается блок modal.

    BEMDOM.append($('body'), BEMHTML.apply(bemjson));

Я так понимаю что Один JS-блок на нескольких HTML-элементах тут не поможет. Так как

Идентификатор id используется только в момент инициализации экземпляра блока. Значение id должно быть уникальным в пределах экземпляров одного блока, в рамках одной волны инициализации.

Как же организовать связанность, если блоки не попадают в одну волну?

Я тут вижу 2 варианта.

Блок modal создается вместе с "родителем". Аяксом создаётся только его контент.

После создания modal добавить его году в массив domElem блока родителя.

BEMHTML.apply() возвращает DOM созданного блока. Через него и удалось организовать доступ.