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

Twitter bootstrap 3 从另一页打开bootstrap 3手风琴面板,twitter-bootstrap-3,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">

这是我的手风琴密码:

<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>

手风琴面板1内容
手风琴面板2内容
我想要一个来自另一个页面的链接来打开1号面板(#myPanelContent)并显示内容。 链接示例:

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

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


提前谢谢。

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

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

$(function(){

    // check if there is a hash in the url
    if ( window.location.hash != '' )
    {
        // remove any accordion panels that are showing (they have a class of 'in')
        $('.collapse').removeClass('in');

        // show the panel based on the hash now:
        $(window.location.hash + '.collapse').collapse('show');
    }

});
这段代码当然使用jQuery,但如果您使用的是bootstrap的accordion,我想您已经在使用jQuery了。


<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>
给出上面提到的链接 并在要显示活动div的页面中添加以下脚本 var url=window.location.toString(); if(url.match('#')){ $('.nav tabs a[href=“#'+url.split('#')[1]+'''']).tab('show'); }
那么,您可以检查是否存在散列(
window.location.hash
),然后触发手风琴面板,类似于
$('.collapse').removeClass('in')$(window.location.hash+'.collapse').collapse('show')正如我所说的,我是java的新手或更好的“刚开始”,所以请您更具体一点。面板关闭,因为在collapsemy链接中没有“in”,来自另一个页面的链接必须是:href=“mynewpage.html”myPanelContent或href=“mynewpage.html”CollapseOn。很好,这里的javascript需要与手风琴位于同一页面上。它将检测URL中的#MyPanel内容。谢谢你,我的朋友,它成功了!我的诀窍是将$更改为jQuery。再次感谢,只需添加链接就必须是href=“mynewpage.html”collapseOne,至少这种方式对我有效。