将URL复制到其他位置后,Bootstrap Accordion不会保留在同一选项卡上

时间:2015-10-19 04:02:37

标签: javascript html css twitter-bootstrap-3 accordion

以下是javascript& Bootstrap手风琴的HTML代码,我在我的项目中使用。

问题是:如果用户位于第二个标签即RELATED SOPs,然后打开其中的任何嵌套标签,然后从地址栏中复制该网址并将其粘贴对于同一浏览器的任何另一个浏览器另一个选项卡,然后始终是第一个选项卡的嵌套选项卡,即QESH MANUAL被打开以代替第二个选项卡&它的嵌套选项卡(最后由用户打开)。

修改

<script type="text/javascript">
    $(document).ready(function () {

        $("ul#tab li:first").addClass("aktif");
        $("div.tab_icerik").hide();
        $("div.tab_icerik:first").show();
        $("ul#tab li").click(function (e) {
            var index = $(this).index();
            $("ul#tab li").removeClass("aktif");
            $(this).addClass("aktif");
            $("div.tab_icerik").hide();
            $("div.tab_icerik:eq(" + index + ")").show();
            return false
        });

        $(".tabv2").click(function () {
            var thisId = $(this).attr('id');
            var thatId = $(this).siblings().attr('id')
            $('[class^="tabv2-"]').hide();
            $('.' + thisId).show();
            $('.tabv2').removeClass('tabv2-active');
            $(this).addClass('tabv2-active');
        });

        $(".tabv2plain").click(function () {
            var thisId = $(this).attr('id');
            var thatId = $(this).siblings().attr('id')
            $('[class^="tabv2plain-"]').hide();
            $('.' + thisId).show();
            $('.tabv2plain').removeClass('tabv2plain-active');
            $(this).addClass('tabv2plain-active');
        });

        $(".tabv3plain").click(function () {
            var thisId = $(this).attr('id');
            var thatId = $(this).siblings().attr('id')
            $('[class^="tabv3plain-"]').hide();
            $('.' + thisId).show();
            $('.tabv3plain').removeClass('tabv3plain-active');
            $(this).addClass('tabv3plain-active');
        });
    });
</script>

<body>
<script>
    function myFunction() {       
        window.location.hash = "#One";
        //var a = "QESH MANUAL" + location.hash;
        //document.getElementById("One").innerHTML = a;
    }

    function myFunction2() {
        window.location.hash = "#Two";
    }

    function myFunction3() {
        window.location.hash = "#collapseOne";
    }

    function myFunction4() {
        window.location.hash = "#collapseOneOne";
    }

    function myFunction5() {
        window.location.hash = "#collapseOneOne1";
    }

    function myFunction6() {
        window.location.hash = "#collapseOneTwo";
    }

    function myFunction7() {
        window.location.hash = "#collapseOneTwo1";
    }

    function myFunction8() {
        window.location.hash = "#collapseOneTwo2";
    }

    function myFunction9() {
        window.location.hash = "#collapseOneTwo3";
    }

    function myFunction10() {
        window.location.hash = "#collapseOneTwo4";
    }

    function myFunction11() {
        window.location.hash = "#collapseOneTwo5";
    }

    function myFunction12() {
        window.location.hash = "#collapseOneTwo6";
    }

    function myFunction13() {
        window.location.hash = "#collapseOneThree";
    }

    function myFunction14() {
        window.location.hash = "#collapseOneThree1";
    }

    function myFunction15() {
        window.location.hash = "#collapseOneFour";
    }

    function myFunction16() {
        window.location.hash = "#collapseOneFour1";
    }

    function myFunction17() {
        window.location.hash = "#collapseTwo";
    }

    function myFunction18() {
        window.location.hash = "#collapseTwo1";
    }

    function myFunction19() {
        window.location.hash = "#collapseThree";
    }

    function myFunction20() {
        window.location.hash = "#collapseThree1";
    }

    function myFunction21() {
        window.location.hash = "#collapseFour";
    }

    function myFunction22() {
        window.location.hash = "#collapseFour1";
    }

    //2nd Tab Menus

    function myFunction23() {
        window.location.hash = "#collapseFive";
    }

    function myFunction24() {
        window.location.hash = "#collapseFive1";
    }
</script>

    <div>
            <div class="row" style="padding-top:5px">
                <div class="col-md-12">
                    <ul id="tab">
                        <li class="">
                            <a onclick="myFunction()" href="#One">QESH MANUAL</a>
                        </li>
                        <li style="margin-left:3px;" class="aktif">
                            <a onclick="myFunction2()" href="#Two">RELATED SOPs</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row" style="padding-top:5px">
                <div class="tab_icerik" style="display: block;">
                    <div class="col-md-4">
                        <span style="display:block;">
                            <div id="accordionA1" class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
                                            <a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction3()" href="#collapseOne"> CONSTRUCTION</a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <!-- SECOND LEVEL ACCORDION START -->
                                            <div id="accordionA2" class="panel-group">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction4()" href="#collapseOneOne">QESH MANUAL</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseOneOne" class="panel-collapse collapse in">
                                                        <div class="panel-body">
                                                            <div class="group row clear" id="tabsv2plain">
                                                                <div class="tabv2plain tabv2plain-active" id="tabv2plain-1">
                                                                    <a onclick="myFunction5()" href="#collapseOneOne1">QESH Manual</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction6()" href="#collapseOneTwo">PROCEDURES MANUALS</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseOneTwo" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            <div class="group row clear" id="Div1">
                                                                <div class="tabv2plain" id="tabv2plain-2">

                                                                    <a onclick="myFunction7()" href="#collapseOneTwo1">Tender &amp; Contract Procedure Manual</a>
                                                                </div>
                                                                <div class="tabv2plain" id="tabv2plain-3">

                                                                    <a onclick="myFunction8()" href="#collapseOneTwo2">Procurement Procedure Manual</a>
                                                                </div>
                                                                <div class="tabv2plain" id="tabv2plain-4">

                                                                    <a onclick="myFunction9()" href="#collapseOneTwo3">Pre-Construction &amp; Planning Procedure Manual</a>
                                                                </div>
                                                                <div class="tabv2plain" id="tabv2plain-5">

                                                                    <a onclick="myFunction10()" href="#collapseOneTwo4">Project Implementation &amp; Management Procedure Manual</a>
                                                                </div>
                                                                <div class="tabv2plain" id="tabv2plain-6">

                                                                    <a onclick="myFunction11()" href="#collapseOneTwo5">Post-Construction Procedure Manual</a>
                                                                </div>
                                                                <div class="tabv2plain" id="tabv2plain-7">

                                                                    <a onclick="myFunction12()" href="#collapseOneTwo6">Management System Administration Procedure Manual</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction13()" href="#collapseOneThree">QESH POLICY</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseOneThree" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            <div class="group row clear" id="Div2">
                                                                <div class="tabv2plain" id="tabv2plain-8">
                                                                    <a onclick="myFunction14()" href="#collapseOneThree1">QESH Policy</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction15()" href="#collapseOneFour">QESH OBJECTIVE</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseOneFour" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            <div class="group row clear" id="Div3">
                                                                <div class="tabv2plain" id="tabv2plain-9">
                                                                    <a onclick="myFunction16()" href="#collapseOneFour1">QESH Objective</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- SECOND LEVEL ACCORDION END -->
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
                                            <a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction17()" href="#collapseTwo">SUNWAY ENGINEERING                                                                                                                                                                                                                                                                                                                                                                                                                                                        </a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <div class="group row clear" id="Div4">
                                                <div class="tabv2plain" id="tabv2plain-10">
                                                    <a onclick="myFunction18()" href="#collapseTwo1">QESH Manual</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
                                            <a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction19()" href="#collapseThree">SUNWAY GEOTECHNICS                                                                                                                                                                                                                                                                                                                                                                                                                                                        </a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <div class="group row clear" id="Div5">
                                                <div class="tabv2plain" id="tabv2plain-11">
                                                 <a onclick="myFunction20()" href="#collapseThree1">QESH Manual</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
                                            <a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction21()" href="#collapseFour">SUNWAY CONCRETE PRODUCTS                                                                                                                                                                                                                                                                                                                                                                                                                                                        </a>
                                        </h4>
                                    </div>
                                    <div id="collapseFour" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <div class="group row clear" id="Div6">
                                                <div class="tabv2plain" id="tabv2plain-12">
                                                  <a onclick="myFunction22()" href="#collapseFour1">QESH Manual</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-8">
                        <span style="display:block; padding:10px;">
                            <div class="tabplaincontent">
                                <div class="tabv2plain-1" style="display:block;">
                                    One Content
                                </div>
                                <div class="tabv2plain-2" style="display:none;">
                                    Two Content
                                </div>
                                <div class="tabv2plain-3" style="display:none;">
                                    Three Content
                                </div>
                                <div class="tabv2plain-4" style="display:none;">
                                    Four Content
                                </div>
                                <div class="tabv2plain-5" style="display:none;">
                                    Five Content
                                </div>
                                <div class="tabv2plain-6" style="display:none;">
                                    Six Content
                                </div>
                                <div class="tabv2plain-7" style="display:none;">
                                    Seven Content
                                </div>
                                <div class="tabv2plain-8" style="display:none;">
                                    Eight Content
                                </div>
                                <div class="tabv2plain-9" style="display:none;">
                                    Nine Content
                                </div>
                                <div class="tabv2plain-10" style="display:none;">
                                    Ten Content
                                </div>
                                <div class="tabv2plain-11" style="display:none;">
                                    Eleven Content
                                </div>
                                <div class="tabv2plain-12" style="display:none;">
                                    Twelve Content
                                </div>
                            </div>
                        </span>
                    </div>
                </div>
                <div class="tab_icerik" style="display: none;">
                    <div class="col-md-4">
                        <span style="display:block;">
                            <div id="accordionB1" class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
                                            <a data-toggle="collapse" data-parent="#accordionB1" onclick="myFunction23()" href="#collapseFive">FINANCE &amp; ADMIN</a>
                                        </h4>
                                    </div>
                                    <div id="collapseFive" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <div class="group row clear" id="tabsv3plain">
                                                <div class="tabv3plain" id="tabv3plain-1">
                                                    <a onclick="myFunction24()" href="#collapseFive1">General</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-8">
                        <span style="display:block; padding:10px;">
                            <div class="tabplaincontent">
                                <div class="tabv3plain-1" style="display:block;">
                                    Thirteen Content
                                </div>
                                <div class="tabv3plain-2" style="display:none;">
                                    Fourteen Content
                                </div>
                                <div class="tabv3plain-3" style="display:none;">
                                    Fifteen Content
                                </div>
                                <div class="tabv3plain-4" style="display:none;">
                                    Sixteen Content
                                </div>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
    </div>

对于上述要求,我添加了window.location.hash来唯一标识网址中的每个Accordion标签 现在,当我点击任何一个Accordion标签时,我可以看到一个唯一的名称(基于选定的标签),在URL的末尾有哈希

示例:

localhost:49963/Test.aspx#collapseThree1

同样,当我复制URL(其中包含每个所选标签的唯一名称)时,始终会打开第一个“折叠式”选项卡,即“构造” - > Quesh手册 - &gt; Quesh手册;用户代替最后选择的标签。仍然存在同样的问题。

非常感谢任何帮助

0 个答案:

没有答案