Html jQuery Accordion-在新页面上打开部分
我试图根据从另一个页面单击的锚定标记,找出如何在jQuery accordion中打开一个部分,但还没有完全弄清楚。我想让它让用户点击一个链接,它会打开一个链接,并根据用户点击的链接将用户直接带到一个打开的部分。你有没有想过如何让它这样工作?下面的代码是我目前如何设置它的——我应该提到它是一个WordPress站点,所以HTML并不漂亮 第一页HTML:Html jQuery Accordion-在新页面上打开部分,html,wordpress,jquery-ui-accordion,Html,Wordpress,Jquery Ui Accordion,我试图根据从另一个页面单击的锚定标记,找出如何在jQuery accordion中打开一个部分,但还没有完全弄清楚。我想让它让用户点击一个链接,它会打开一个链接,并根据用户点击的链接将用户直接带到一个打开的部分。你有没有想过如何让它这样工作?下面的代码是我目前如何设置它的——我应该提到它是一个WordPress站点,所以HTML并不漂亮 第一页HTML: <a href="http://lindseybakermedia.com/design/GPI/speaker-bios/#welco
<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>
内容
内容
请在第二页使用以下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>
JavaScript代码:
var param=document.URL.split(“#”)[1];
如果(参数=='content1')
{
var content='.content1';
}
else if(参数=='content2')
{
var content='.content2';
}
$(“手风琴”)。手风琴({
可折叠的:是的,
标题:“h3”,
活动:$('#手风琴h3')。索引($(内容)),
高度样式:“内容”
});
});
HTML代码:
内容
内容