Я использую разборчивые вкладки пользовательского интерфейса jQuery. Мой код выглядит так:
HTML
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1 Contents</p>
<a href="#" class="btn-close">Close</a>
</div>
<div id="tabs-2">
<p>Tab 2 Contents</p>
<a href="#" class="btn-close">Close</a>
</div>
<div id="tabs-3">
<p>Tab 3 Contents</p>
<a href="#" class="btn-close">Close</a>
</div>
</div>
скрипт
$(function() {
$( "#tabs" ).tabs({ hide: { effect: "slideUp", duration: 350 },
show: { effect: "slideDown", duration: 350 },
collapsible: true,
active: false,
});
$(".btn-close").on( "click", function() {
$( "#tabs" ).tabs( "option", "hide", { effect: "slideUp", duration: 350 } );
});
});
Мне нужно свернуть открытую вкладку, нажав "закрыть" якорь, но не могу понять, как это сделать. Может ли кто-нибудь сказать, что я делаю неправильно? См. Выше код JSFiddle.
К сожалению, в плагине вкладок нет метода скрыть. С помощью метода опций вы изменяете настройку плагина. Вы должны активировать событие click на активной вкладке следующим образом:
$(".btn-close").on( "click", function() {
$("#tabs").find('li.ui-state-active a').trigger('click');
});
(В этом ответе используются улучшения, предложенные A.Wolff для удаления зависимости от родительского элемента.)
Здесь ваша обновленная скрипка
Попробуй это:
$(".btn-close").click(function() {
$( "#tabs" ).tabs( "option", "toggle", { effect: "slideUp", duration: 350 } );
$(this).parent().hide();
});
Здесь скрипка
$(this).parent().hide();
который сейчас прокомментирован.
$(".btn-close").on("click", function () { $(this).closest('.ui-tabs').find('.ui-tabs-active a').click(); });