不同頁面上的手風琴菜單的錨鏈接不起作用（引導程序）

Question

我有一個與之前發布的問題類似的問題。 我有一個內置於Bootstrap中的頁面，並且有幾個鏈接可以使讀者跳到需要手風琴菜單打開特定選項卡的鏈接。 在Stack Overflow的幫助下，它可以運行，但是它只能在我的計算機上運行，​​而不能在線運行（我未完成的草稿位於verbiadastra.com-我的意思是“服務”下的鏈接）。 我的另一個問題是，我無法打開位於不同頁面而非同一頁面上的選項卡（從index.html到contact.html）。這是JS Fiddle 。 我將衷心感謝您的幫助！

這是HTML：

<p>Go to <a href="#tab1" onclick="openTab1()">Tab1</a>.</p>
<p>Go to <a href="#tab2" onclick="openTab2()">Tab2</a>.</p>
<p>Go to <a href="#tab3" onclick="openTab3()">Tab3</a>.</p>

<section id="content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 wow fadeInDown">
               <div class="tab-wrap"> 
                    <div class="media">
                        <div class="parrent pull-left">
                            <ul class="nav nav-tabs nav-stacked">
                                <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><i class="fa fa-comments"></i>Tab1</a></li>
                                <li class=""><a href="#tab2" data-toggle="tab" class="tehnical"><i class="fa fa-pencil-square-o"></i>Tab2</a></li>
                                <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><i class="fa fa-check-square-o"></i>Tab3</a></li>                                   
                            </ul>
                        </div>

                        <div class="parrent media-body">
                            <div class="tab-content">

                                <div class="tab-pane fade active in" id="tab1">
                                    <div class="media">
                                       <div class="pull-left">
                                           <img class="img-responsive" src="images/services/tab1-1.png">
                                           <br>
                                           <img class="img-responsive" src="images/services/tab1-2.png">
                                           <br>
                                           <img class="img-responsive" src="images/services/tab1-3.png">
                                        </div>
                                        <div class="media-body">
                                            <a name="Tab1"></a>
                                            <h2>Tab1</h2>
                                            <p>Tab1Tab1Tab1.</p>                         
                                        </div>
                                    </div>
                                </div>

                                 <div class="tab-pane fade" id="tab2">
                                    <div class="media">
                                       <div class="pull-left">
                                           <img class="img-responsive" src="images/services/tab2.jpg">
                                        </div>
                                        <div class="media-body">
                                            <a name="Tab2"></a>
                                           <h2>Tab2</h2>                                                <p>Tab2Tab2Tab2.</p>                                                                                             </div>
                                    </div>
                                 </div>

                                 <div class="tab-pane fade" id="tab3">
                                     <div class="media">
                                         <div class="pull-left">
                                             <img class="img-responsive" src="images/services/tab3.jpg">
                                         </div>
                                         <div class="media-body">
                                             <a name="Tab3"></a>
                                             <h2>Tab3</h2>
                                             <p>Tab3Tab3Tab3 </p>

                                         </div>
                                     </div>
                                 </div>
                                                                 </div> <!--/.tab-content-->  
                        </div> <!--/.media-body--> 
                    </div> <!--/.media-->     
                </div><!--/.tab-wrap-->               
            </div><!--/.col-sm-6-->
                                                    </div><!--/.row-->
    </div><!--/.container-->

這是JavaScript：

var openTab1 = function() {
$('[href="#tab1"]').tab('show');
}

var openTab2 = function() {
$('[href="#tab2"]').tab('show');
}

var openTab3 = function() {
$('[href="#tab3"]').tab('show');
}

Answer 1

好的，我知道了-這是我的解決方案，以防萬一，它可以幫助任何人，也許有人可以讓我知道我是否應該做不同的事情：

我刪除了上面發布的JavaScript代碼，並且點擊時我的鏈接不再調用該函數。 相反，我編寫了一個在頁面加載時調用的函數：它檢查URL中是否有任何井號（＃），並且如果存在，則將其值與我用來調用不同選項卡的值進行比較。 。 然后，對於每個標簽頁ID，我都會執行打開標簽頁的功能。 然后，它也跳到具有＃標簽ID的div（而不是鏈接錨，我知道該鏈接錨在HTML5中已作廢）。 功能如下：

<body class="homepage" onload="TabHash()">

接着：

<script> 
var TabHash = function() {          
//check if hash tag exists in the URL
if(window.location.hash) { 
    //set the value as a variable, and remove the #
    var hash_value = window.location.hash.replace('#', ''); 
    if (hash_value == "Tab1Name") {
    $('[href="#tab1"]').tab('show');
    }
    if (hash_value == "Tab2Name") {
    $('[href="#tab2"]').tab('show');
    }
    if (hash_value == "Tab3Name") {
    $('[href="#tab3"]').tab('show');
    }        
 }
}
</script>

鏈接如下所示：

<a href="index.html#Tab1Name">Go to Tab 1.</a>
<a href="index.html#Tab2Name">Go to Tab 2.</a>
<a href="index.html#Tab3Name">Go to Tab 3.</a>