jQuery Accordion - открыть раздел на новой странице

Я пытаюсь понять, как открыть раздел в аккордеоне jQuery на основе тега привязки, щелкнутого на другой странице, но не могу понять это. Я бы хотел, чтобы пользователь щелкал ссылку на одной странице, которая открывала вторая страница и направляет пользователя прямо на открытый раздел по ссылке, которую они щелкнул. Любые мысли, как заставить это работать как таковое? Ниже приведен код, как я его настроил на данный момент — я должен упомянуть, что это сайт 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>

person m-use    schedule 26.05.2015    source источник


Ответы (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>
person Ash Patel    schedule 26.05.2015