Question

我试图弄清楚如何根据从不同页面点击的锚标记在jQuery手风琴中打开一个部分，但是无法弄明白。我想拥有它，以便用户点击one page上的链接，该链接会打开second page并根据用户点击的链接将用户直接带到打开的部分。有任何想法如何使这个工作？下面的代码是我现在设置的方式 - 我应该提一下它是一个WordPress网站，所以HTML并不漂亮。

第一页HTML：

<a href="http://lindseybakermedia.com/design/GPI/speaker-bios/#welcoming-remarks">Welcoming Remarks</a>
<a href="http://lindseybakermedia.com/design/GPI/speaker-bios/#keynote-remarks">Keynote Session</a>

第二页HTML：

<div class="vc_col-sm-12 wpb_column vc_column_container ">
    <div class="wpb_wrapper">
        <div class="wpb_accordion wpb_content_element  not-column-inherit" data-collapsible="" data-vc-disable-keydown="false" data-active-tab="false">
            <div class="wpb_wrapper wpb_accordion_wrapper ui-accordion">
                <div class="wpb_accordion_section group">
                    <h3 class="wpb_accordion_header ui-accordion-header"><a href="#welcoming-remarks">Welcoming Remarks</a></h3>
                    <div class="wpb_accordion_content ui-accordion-content vc_clearfix">
                        <div class="wpb_text_column wpb_content_element ">
                            <div class="wpb_wrapper">
                                <p>Content</p>
                            </div> 
                        </div> 
                    </div>
                </div> 
                <div class="wpb_accordion_section group">
                    <h3 class="wpb_accordion_header ui-accordion-header"><a href="#keynote-remarks">Keynote Remarks</a></h3>
                    <div class="wpb_accordion_content ui-accordion-content vc_clearfix">
                        <div class="wpb_text_column wpb_content_element ">
                            <div class="wpb_wrapper">
                                <p>Content</p>
                            </div> 
                        </div> 
                    </div>
                </div> 
            </div> 
        </div> 
    </div> 
</div>

Answer 1

请在第二页上使用以下HTML和JavaScript代码：

JavaScript Code:
<script type="text/javascript">
var param = document.URL.split('#')[1];  
if(param == 'content1')
{
    var content = '.content1';
}
else if(param == 'content2')
{
    var content = '.content2';
}           
$("#accordion").accordion({
    collapsible: true,
    header: "h3",
    active: $('#accordion h3').index($(content)),
    heightStyle: "content"
});
});
</script>

HTML Code:

    <div id="accordion">
 <div class="vc_col-sm-12 wpb_column vc_column_container ">
    <div class="wpb_wrapper">
        <div class="wpb_accordion wpb_content_element  not-column-inherit" data-collapsible="" data-vc-disable-keydown="false" data-active-tab="false">
            <div class="wpb_wrapper wpb_accordion_wrapper ui-accordion">
                <div class="wpb_accordion_section group">
                    <h3 class="wpb_accordion_header ui-accordion-header content1"><a href="#welcoming-remarks">Welcoming Remarks</a></h3>
                    <div class="wpb_accordion_content ui-accordion-content vc_clearfix">
                        <div class="wpb_text_column wpb_content_element ">
                            <div class="wpb_wrapper">
                                <p>Content</p>
                            </div> 
                        </div> 
                    </div>
                </div> 
                <div class="wpb_accordion_section group">
                    <h3 class="wpb_accordion_header ui-accordion-header content2"><a href="#keynote-remarks">Keynote Remarks</a></h3>
                    <div class="wpb_accordion_content ui-accordion-content vc_clearfix">
                        <div class="wpb_text_column wpb_content_element ">
                            <div class="wpb_wrapper">
                                <p>Content</p>
                            </div> 
                        </div> 
                    </div>
                </div> 
            </div> 
        </div> 
    </div> 
</div>
</div>

jQuery Accordion - 在新页面上打开部分

1 个答案: