锚链接的手风琴菜单在不同的页面不工作(引导)

Anchor links for accordion menu on different page not working (Bootstrap)

本文关键字：工作 引导 手风琴 菜单 链接      更新时间：2023-09-26

我有一个类似的问题，我以前张贴。我有一个页面内置的Bootstrap，我有几个链接，跳读者锚链接需要一个手风琴菜单打开一个特定的选项卡。在Stack Overflow的帮助下，我让它工作了，但它只在我的电脑上工作，而不是在线(我未完成的草稿在verbiadastra.com上-我的意思是"服务"下的链接)。我的另一个问题是，我不能让它打开一个标签，在不同的页面，而不是同一页(从index.html到contact.html)这是JS小提琴。非常感谢您的帮助!

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');
}

好了，我想明白了——这是我的解决方案，以防它对任何人有帮助，也许有人可以告诉我是否应该这样做:

我删除了我上面发布的JavaScript代码，并且我的链接不再在点击时调用该函数。相反，我编写了一个在页面加载时调用的函数:它检查URL中是否有hashtag(#)，如果有，我让它将其值与我用来调用不同选项卡的值进行比较。然后对于每个选项卡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>
相关文章：