【发布时间】：2016-03-29 01:40:38
【问题描述】：
我刚刚实现了这段代码 (https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion)，用于在较小的屏幕上将一组选项卡转换为手风琴布局。它工作得非常好，除了我需要能够指定从另一个页面链接时打开哪个选项卡/手风琴。
这是我正在开发的网站 - http://www.eventsthatmatter.co.uk/new/
单击主页上的四种“服务”类型之一时，我需要它来打开服务页面上的相应选项卡。目前它默认为第一个选项卡。
该问题已在作者的 GitHub 页面上提出，但尚未得到回答。只是想知道这里是否有人可以提供帮助。我可以在这里看到这个问题已经被问到与标签和手风琴的其他 jquery 示例有关，但由于我缺乏 JQuery 经验，我不确定如何使用该建议来通过这个脚本实现它。
这是html：
<div id="tabs">
<ul class="resp-tabs-list">
<li id="tab01">...</li>
<li id="tab02">...</li>
<li id="tab03">...</li>
<li id="tab04" class="last">...</span></li>
</ul>
<div class="resp-tabs-container">
<div id="services01">...</div>
<div id="services02">...</div>
<div id="services03">...</div>
<div id="services04">...</div>
</div>
</div>
还有 JS：
(function ($) {
$.fn.extend({
easyResponsiveTabs: function (options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
type: 'default', //default, vertical, accordion;
width: 'auto',
fit: true,
closed: false,
activate: function(){}
}
//Variables
var options = $.extend(defaults, options);
var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
//Main function
this.each(function () {
var $respTabs = $(this);
var $respTabsList = $respTabs.find('ul.resp-tabs-list');
$respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
$respTabs.css({
'display': 'block',
'width': jwidth
});
$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
jtab_options();
//Properties Function
function jtab_options() {
if (jtype == vtabs) {
$respTabs.addClass('resp-vtabs');
}
if (jfit == true) {
$respTabs.css({ width: '100%', margin: '0px' });
}
if (jtype == accord) {
$respTabs.addClass('resp-easy-accordion');
$respTabs.find('.resp-tabs-list').css('display', 'none');
}
}
//Assigning the h2 markup to accordion title
var $tabItemh2;
$respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
var itemCount = 0;
$respTabs.find('.resp-accordion').each(function () {
$tabItemh2 = $(this);
var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').html();
$respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
$respTabs.find('.resp-accordion:eq(' + itemCount + ')').addClass('resp-accordion-' + (itemCount));
$tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
itemCount++;
});
//Assigning the 'aria-controls' to Tab items
var count = 0,
$tabContent;
$respTabs.find('.resp-tab-item').each(function () {
$tabItem = $(this);
$tabItem.attr('aria-controls', 'tab_item-' + (count));
$tabItem.attr('role', 'tab');
//First active tab, keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode
if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {
$respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
$respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
}
//Assigning the 'aria-labelledby' attr to tab-content
var tabcount = 0;
$respTabs.find('.resp-tab-content').each(function () {
$tabContent = $(this);
$tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
tabcount++;
});
count++;
});
//Tab Click action function
$respTabs.find("[role=tab]").each(function () {
var $currentTab = $(this);
$currentTab.click(function () {
var $tabAria = $currentTab.attr('aria-controls');
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
$respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
$currentTab.removeClass('resp-tab-active');
return false;
}
if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
} else {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
}
});
//Window resize function
$(window).resize(function () {
$respTabs.find('.resp-accordion-closed').removeAttr('style');
});
});
});
}
});
})(jQuery);
提前感谢您的帮助。
干杯， 凯夫
【问题讨论】：
-
我已经设法使用我自己可怕的 hacky javascript 让它工作，它根据 url 参数 (?tab=x) 更改类，但我确信有一个更正确的方法如果有人有任何想法，请执行此操作。
标签： jquery tabs responsive-design accordion