Табы в балуне

Я же дал ссылку на пример. Что именно не получается?

Можно использовать jQuery.on на селектор ".tab-pane"

https://api.jquery.com/on/

не получаеться понять, как мне туда вообще записывать? ти по 

$('#Tab').bind('click', this.onCounterClick);

                $('#tab-content').html(counter);

мне нужно понять как правильно называть эти переменные и как прописывать вообще такую функцию. В том примере да и другом build не расписан в коментах, не понятно мне человеку , который не работал раньше с апи, но нету времени изучать основы( Нужно понять только отдельные вещи 

АПИ тут ни при чем. Прочитайте про селекторы и событийную модель jQuery. 

ну ок, покапался , вот что вышшло 

             ' '+ '  '+  'Welcome to StarTrackr! the planets premier … '+ '  '+  '   StarTrackr! was founded in early 2009 when a young …'+'   '+ '  '+ '    Disclaimer! This service is not intended for those …'+'   '+' '+'

'+

'  

Intro

'+ '

About Us

'+'  

Disclaimer

'+''

ну и 

                    this.constructor.superclass.build.call(this);                    this._$element = $('.popover', this.getParentElement());                                             $('#info-nav li').click(function(event) {  event.preventDefault();  $('#info div').hide();  $('#info-nav .current').removeClass("current");  $(this).addClass('current');  var clicked = $(this).find('a:first').attr('href');  $('#info ' + clicked).fadeIn('fast');}).eq(0).addClass('current');                },                /**                 * Удаляет содержимое макета из DOM.                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#clear                 * @function                 * @name clear                 */                clear: function () {                    this._$element.find('.close')                        .off('click');                    this.constructor.superclass.clear.call(this);                },

работают, но не как табы , а как ссылки, как им предать нужный вид?

CSS

чета пока ппц как криво . Вот код, может для кого то тоже полезен 

 BalloonContentLayout2 = ymaps.templateLayoutFactory.createClass(             ''+ '

'+

  '  

1-я вкладка

'+  '  

2-я вкладка

'+ ' '+'  '+ '   Содержимое первого блока'+'  '+'  '+ '  Содержимое второго блока'+ ' '+'', {            // Переопределяем функцию build, чтобы при создании макета начинать            // слушать событие click на кнопке-счетчике.            build: function () {                // Сначала вызываем метод build родительского класса.                BalloonContentLayout2.superclass.build.call(this);                // А затем выполняем дополнительные действия.                 $('ul.tabs__caption').on('click', 'li:not(.active)', function() {    $(this)      .addClass('active').siblings().removeClass('active')      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');  });            },            // Аналогично переопределяем функцию clear, чтобы снять            // прослушивание клика при удалении макета с карты.            clear: function () {                // Выполняем действия в обратном порядке - сначала снимаем слушателя,                // а потом вызываем метод clear родительского класса.                                  BalloonContentLayout2.superclass.clear.call(this);            }                    });    var placemark = new ymaps.Placemark([0.195219, -0.488964], {                 }, {            balloonContentLayout: BalloonContentLayout2,            // Запретим замену обычного балуна на балун-панель.            // Если не указывать эту опцию, на картах маленького размера откроется балун-панель.            balloonPanelMaxMapArea: 0        });    map.geoObjects.add(placemark);}

как правельно там прописать событие  clear: function () {  ?

ну а цсс вот 

  display: none;  border: 1px solid #D4D4D4;  border-width: 0 1px 1px;  background: #EFEFEF;  padding: 0 12px;}.tabs__content.active {  display: block;  }.tabs__caption .active {  color: #444;  background: #EFEFEF;  }.tabs__caption {  height: 28px;   width: 200px;  line-height: 25px;  list-style: none;  border-bottom: 1px solid #DDD;  background: #FFF;.tabs {  width: 600px;  background: #EFEFEF;  margin: 0 0 30px;}.tabs__caption li {  float: left;  display: inline;  margin: 0 1px -1px 0;  padding: 0 13px 1px;  color: #777;  cursor: pointer;  background: #F9F9F9;  border: 1px solid #E4E4E4;  border-bottom: 1px solid #F9F9F9;  position: relative;}

криво, очень криво, хотя не должно быть так