如何从WordPress中的另一个页面打开手风琴中的特定选项卡

Question

请帮我解决这个问题。我正在为我的客户开发一个网站 链接 http://richescarpentryandbuilding.com.au/在这里你会得到弹跳的 css3 效果图片和 h2 标题下方。当人们点击h2标题（例如质量建筑商，住宅建筑，商业安装等）时，我想要的只是单个h2标题将打开服务页面的 http://richescarpentryandbuilding.com.au/service/特定手风琴选项卡，例如"质量建筑商"住宅建筑"商业安装"分别。我已经放了链接，但它们不起作用。我是Javascript和Jquery的新手。我正在为我的手风琴使用以下代码.....

$(function() {
    var myName = $('#name');
    myName.focus(function() { if ($(this).val() == 'NAME ...') {$(this).val('');} });
    myName.blur(function() { if ($(this).val() == '') {$(this).val('NAME ...');} });        
    var myEmail = $('#email');
    myEmail.focus(function() { if ($(this).val() == 'EMAIL ...') {$(this).val('');} });
    myEmail.blur(function() { if ($(this).val() == '') {$(this).val('EMAIL ...');} });          
    $('.top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
    $('.header nav ul ul li a').append('<span>&nbsp;</span>');
    $('.featured_list li a').append('<span class="zoom">&nbsp;</span>');
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function(){
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });
$('#h_tabs div').hide();
$('#h_tabs div:first').show();
$('#h_tabs ul li:first').addClass('active');
$('#h_tabs ul li a').click(function(){
    $('#h_tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab2 = $(this).attr('href');
    $('#h_tabs div').hide();
    $(currentTab2).show();
    return false;
});
$('#s_tabs div').hide();
$('#s_tabs div:first').show();
$('#s_tabs ul li:first').addClass('active');
$('#s_tabs ul li a').click(function(){
    $('#s_tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab3 = $(this).attr('href');
    $('#s_tabs div').hide();
    $(currentTab3).show();
    return false;
});
$('.top_title, .text_bar2').prepend('<div class="text_bar_shadow"></div>').append('<div class="text_bar_shadow2"></div>');
$('.features_block ul li, .features2_block ul li, .bc_list ul li, .features5_block ul li, .services_option4 ul li, .small_icons ul li, .medium_icons ul li, .large_icons ul li').prepend('<span class="circle"></span>');
$('.faq_list .filter li').on('click', function(){
    $('.faq_list .filter li').removeClass('active');
    $(this).addClass('active');
});
$('.faq_list .filter .all').on('click', function(){
    $('#faq .all').show();
});
$('.faq_list .filter .business').on('click', function(){
    $('#faq .technical').hide();
    $('#faq .miscellaneous').hide();
    $('#faq .business').show();
});
$('.faq_list .filter .technical').on('click', function(){
    $('#faq .business').hide();
    $('#faq .miscellaneous').hide();
    $('#faq .technical').show();
});
$('.faq_list .filter .miscellaneous').on('click', function(){
    $('#faq .business').hide();
    $('#faq .technical').hide();
    $('#faq .miscellaneous').show();
});
});  

请帮我解决这个问题。谢谢

Answer 1

考虑使用 jQueryUI 手风琴元素，这是一个现成的手风琴插件，实现起来非常简单。你只需要导入jQuery和jQueryUI库就可以工作，然后你可以用一个非常简单的jQuery初始化函数触发它。您可以在此处找到完整的文档：http://api.jqueryui.com/accordion/