Я нашел простую плагин jQuery в виде вкладок, которая требует некоторой адаптации для моего проекта. Закладки, о которых идет речь, - будучи абсолютно позиционированными, - выводятся из потока и, как таковые, не вносят вклад в высоту оберточного div, поэтому фон позади них не отображается. Я пытаюсь заставить высоту оберточного div (содержащего фоновое изображение) соответствовать высоте выбранной вкладки (+ 400 пикселей для навигации и заголовка), и для достижения этого на лету я адаптирую исходный файл jQuery. Вот код (с несколькими лишними строками (прокомментировал 'добавлен!'))., предназначенный для дочернего объекта event.currentTarget
var cbpHorizontalMenu = (function() {
var $listItems = $('#cbp-hrmenu > ul > li'),
$menuItems = $listItems.children('a'),
$body = $('body'),
current = -1;
function init() {
$menuItems.on('click', open);
$listItems.on('click', function (event) {
event.stopPropagation();
});
}
function open(event) {
if (current !== -1) {
$listItems.eq(current).removeClass('cbp-hropen');
}
var $item = $(event.currentTarget).parent('li'),
idx = $item.index();
if (current === idx) {
$item.removeClass('cbp-hropen');
//added!
current = -1;
} else {
$item.addClass('cbp-hropen');
current = idx;
$body.off('click').on('click', close);
var content2Height = jQuery(".cbp-hrsub").height() + 400;
jQuery('#content2').height(content2Height); //added
}
return false;
}
function close(event) {
$listItems.eq(current).removeClass('cbp-hropen');
//added!
current = -1;
}
return {
init: init
};
})();
Он делает что-то, но не то, что мне нужно. Он получает высоту сначала div.cbp-hrsub и применяет его (+ 400 пикселей) к div.content2. Мне нужно настроить таргетинг на вкладку (дочерний элемент event.currentTarget, мне кажется?), Чтобы вычислить ее высоту и применить ее к div content2.
Это упрощенный HTML, если это помогает:
<div class="content2">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">tab 1</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am 1st tab, 100px height.
</div>
</div>
</li>
<li>
<a href="#">tab 2</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am 2nd tab, 200px height.
</div>
</div>
</li>
<li>
<a href="#" class="white06">Nigel's CV</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am 3rd tab, 300px height.
</div>
</div>
</li>
</ul>
</nav>
Просто чтобы прояснить, я хочу, чтобы сохранить оригинальный плагин, как это, просто чтобы вставить что-то вместо моих 2-х линий, в направлении конец файла. (Вар content2Height = JQuery ("ТПС-hrsub.") Высота() + 400;. JQuery ('# Content2') высота (content2Height). // добавил Спасибо всем за время
Зел
.
Спасибо за ваше время. Фактически это делает то же, что и мой код. Он получает высоту вкладки FIRST независимо от того, какая клика по ссылке. Мне нужно настроить таргетинг на дочерний объект целевой ссылки. Поэтому вместо $ item.first это должно быть что-то вроде $ item.current (но это не так, я пытался). – Zel