Jquery 对Accordion的响应选项卡-从不同页面打开选项卡

Jquery 对Accordion的响应选项卡-从不同页面打开选项卡,jquery,tabs,responsive-design,accordion,Jquery,Tabs,Responsive Design,Accordion,我刚刚实现了这段代码(),用于将一组选项卡转换为较小屏幕上的手风琴布局。它的工作非常好,除了我需要能够指定哪个选项卡/手风琴打开时,从另一个页面链接 这是我正在做的网站- 当点击主页上四种“服务”类型中的一种时,我需要它打开服务页面上相应的选项卡。目前它默认为第一个选项卡 这个问题已经在作者的GitHub页面上提出,但尚未得到回答。我想知道这里是否有人能帮忙。在这里我可以看到,这个问题是关于标签和手风琴的其他jquery示例的,但是由于我缺乏jquery经验,我不确定如何使用这个建议来实现这个脚

我刚刚实现了这段代码(),用于将一组选项卡转换为较小屏幕上的手风琴布局。它的工作非常好,除了我需要能够指定哪个选项卡/手风琴打开时,从另一个页面链接

这是我正在做的网站-

当点击主页上四种“服务”类型中的一种时,我需要它打开服务页面上相应的选项卡。目前它默认为第一个选项卡

这个问题已经在作者的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);
(函数($){
$.fn.extend({
easyResponsiveTabs:功能(选项){
//设置默认值,使用逗号分隔设置,例如:
var默认值={
键入:'default',//默认,垂直,手风琴;
宽度:“自动”,
菲特:没错,
关闭:错误,
激活:函数(){}
}
//变数
var options=$.extend(默认值,选项);
var opt=options,jtype=opt.type,jfit=opt.fit,jwidth=opt.width,vtabs='vertical',accord='accordion';
//主要功能
这个。每个(函数(){
var$resptab=$(此);
var$respTabsList=$respTabs.find('ul.resp选项卡列表');
$resptab.find('ul.resp-tabs-list li').addClass('resp-tab-item');
$respTabs.css({
“显示”:“块”,
“宽度”:jwidth
});
$respTabs.find('.respTabs container>div').addClass('resp-tab-content');
jtab_选项();
//属性函数
函数jtab_options(){
if(jtype==vtabs){
$resptab.addClass('resp-vtabs');
}
如果(jfit==true){
$resptables.css({宽度:'100%,边距:'0px'});
}
if(jtype==accord){
$resptables.addClass('resp-easy-accordion');
$resptab.find('.resptab-list').css('display','none');
}
}
//将h2标记指定给手风琴标题
var$tabItemh2;
$resptab.find(“.resp tab content”)。在(“”)之前;
var itemCount=0;
$resptab.find('.resp accordion')。每个(函数(){
$tabItemh2=$(此项);
var innertext=$resptab.find('.resp选项卡项:eq('+itemCount+')).html();
$resptab.find('.resp accordion:eq('+itemCount+')).append(innertext);
$resptab.find('.resp accordion:eq('+itemCount+')).addClass('resp-accordion-'+(itemCount));
$tabItemh2.attr('aria-controls','tab_item-'+(itemCount));
itemCount++;
});
//将“aria控件”分配给选项卡项
变量计数=0,
$tabContent;
$resptab.find('.resp tab项')。每个(函数(){
$tabItem=$(此项);
$tabItem.attr('aria-controls','tab_item-'+(count));
$tabItem.attr('role','tab');
//第一个活动选项卡,如果option='closed'或option是'accordion',并且元素处于accordion模式,则保持关闭
如果(options.closed!==true&&&!(options.closed=='accordion'和&!$resptableslist.is(':visible'))&&&!(options.closed=='tabs'和&$resptableslist.is(':visible')){
$resptab.find('.resp tab item').first().addClass('resp-tab-active');
$resptab.find('.resp accordion').first().addClass('resp-tab-active');
$resptab.find('.resp tab content').first().addClass('resp-tab-content-active').attr('style','display:block');
}
//将“aria labelledby”属性分配给选项卡内容
var-tabcount=0;
$resptab.find('.resp tab content')。每个(函数(){
$tabContent=$(此项);
$tabContent.attr('aria-labelledby','tab_item-'+(tabcount));
tabcount++;
});
计数++;
});
//选项卡单击操作功能
$resptab.find(“[role=tab]”)。每个(函数(){
var$currentTab=$(此);
$currentTab.单击(函数(){
var$tabAria=$currentTab.attr('aria-controls');
if($currentTab.hasClass('resp-accordion')&&$currentTab.hasClass('resp-tab-active')){
$resptab.find('.resp tab content active').slideUp('',function(){$(this.addClass('resp-accordion-closed');});
$currentTab.removeClass('resp-tab-active');
返回false;
}
如果(!$currentTab.hasClass('resp-tab-active')&&$currentTab.hasClass('resp-accordion')){
$resptab.find('.resp-tab-active').removeClass('resp-tab-active');
var stab = 2 // selected tab

lis = $("ul.resp-tabs-list > li");
lis.removeClass("resp-tab-active");
$("ul.resp-tabs-list li[aria-controls='tab_item-"+stab+"']").addClass("resp-tab-active");
divs = $("#tabs .resp-tabs-container > div");
divs.removeClass("resp-tab-content-active").removeAttr("style");
$("#tabs .resp-tabs-container div[aria-labelledby='tab_item-"+stab+"']").addClass("resp-tab-content-active").attr("style","display: block;");
var vtab=3;

//remove the activated tab

var areatext = $("ul.resp-tabs-list").find(".resp-tab-active").first().attr('aria-controls');

$('#verticalTab').find('[aria-controls=' + areatext + ']').removeClass('resp-tab-active');

$('.resp-tabs-container').find('[aria-labelledby=' + areatext + ']').removeClass('resp-tab-content-active').removeAttr("style");

//activate the target tab

$("#verticalTab li[aria-controls='tab_item-" + vtab + "']").addClass("resp-tab-active");

$("#verticalTab .resp-tabs-container div[aria-labelledby='tab_item-" + vtab + "']").addClass("resp-tab-content-active").attr("style", "display: block;");
//set default tab
  var vtab=0;
//remove the activated tab
  var areatext = $("ul.resp-tabs-list").find(".resp-tab-active").first().attr('aria-controls');
//activate the target tab
  $("#horizontalTab h2[aria-controls='tab_item-" + vtab + "']").addClass("resp-tab-active");
  $("#horizontalTab .resp-tabs-container div[aria-labelledby='tab_item-" + vtab + "']").addClass("resp-tab-content-active").attr("style", "display: block;");
 <?php
    if(isset($_GET['tab1'])){
        $tab1_active = "r-tabs-panel r-tabs-state-active";
     }
  ?>
 <div id="tabs-1" <?php if(isset($tab1_active)){ echo 'class="'.$tab1_active.'"';}?>>
<input type="hidden" value="tab1" name="tab1" />