简体   繁体   English

如何在超链接上展开特定的Bootstrap手风琴面板单击另一页?

[英]How to expand specific bootstrap accordion panel on hyperlink Click on another page?

I have bootstrap accordion in my website and now I am trying to expand respective panels on hyperlink click (from another webpage of same website). 我的网站上有自举式手风琴,现在我想在超链接单击上扩展相应的面板(来自同一网站的另一个网页)。 I have already tried most of the solution provided on other .net communities as well but no luck. 我已经尝试过其他.net社区提供的大多数解决方案,但是没有运气。 As I am new to JavaScript or jquery I might be coding something wrong. 由于我是JavaScript或jquery的新手,所以我可能在编写一些错误的代码。 any advice to solve this would be really helpful. 任何解决此问题的建议将非常有帮助。

<div class="panel-group" id="accordion">
   <div class="panel panel-success">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
                    <b>Vehicle Code Matching</b>
                </a>
            </h4>
        </div>
        <div id="accordionTwo" class="panel-collapse collapse">
            <div class="panel-body">
              Test paragraph 1
            </div>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
                    <b>Vehicle Data Association</b>
                </a>
            </h4>
        </div>
        <div id="accordionThree" class="panel-collapse collapse">
            <div class="panel-body">
              Test paragraph 2
            </div>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionFive">
                    <b>Data Cleansing</b>
                </a>
            </h4>
        </div>
        <div id="accordionFive" class="panel-collapse collapse">
            <div class="panel-body">
               Test paragraph 3
            </div>
        </div>
    </div>
</div>

Add to Guruprasad Rao's comment, when you know which panel needs to be opened (pass data between pages), you can add 'in' class to the panel that needs to be opened by default. 添加到Guruprasad Rao的注释中,当您知道需要打开哪个面板(在页面之间传递数据)时,可以将'in'类添加到默认情况下需要打开的面板中。 If you want, you can also activate accordions using javascript using the $('ID of your panel').collapse('show') function. 如果需要,您还可以使用$('面板ID')。collapse('show')函数使用javascript激活手风琴。 See http://getbootstrap.com/javascript/#collapse-example-accordion 请参阅http://getbootstrap.com/javascript/#collapse-example-accordion

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM