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>

不同页面上的手风琴菜单的锚点链接不起作用（Bootstrap）

1 个答案: