从另一页打开bootstrap 3手风琴面板

时间:2017-08-23 14:58:34

标签: twitter-bootstrap-3

这是我的手风琴代码:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body" id="myPanelContent">
        Accordion Panel 1 Content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Accordion Panel 2 Content
      </div>
    </div>
  </div>
</div>

我想从另一个页面链接打开No 1面板(#myPanelContent)并显示内容。 链接示例:

<a href="mynewpage.html#myPanelContent">Go to Panel 1 content</a>

的确如此,我使用了stackoverflow中的一些解决方案,但没有奏效。详细解释如何使用代码将非常感激,因为我是javascript的新手。

提前致谢。

2 个答案:

答案 0 :(得分:1)

我会在回复我的评论时添加一个答案。

您需要检查网址中是否存在哈希值,如果是,则显示手风琴面板,您可以这样完成:

clickEvent.pageX

这段代码当然使用jQuery,但是如果你使用bootstrap的手风琴,我想你已经在使用它了吗?

答案 1 :(得分:0)

<a href="identity.html#students"></a> 
give the link like above mentioned
and add the below script in the page where you want to show the active div

<script type="text/javascript">
    var url = window.location.toString();
     if (url.match('#')) {
      $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show');
    }

</script>