如何使用Bootstrap3选项卡链接到其他页面上的特定选项卡？

debugcn 发表于 Dev

肯尼斯·范登·伯格（Kenneth Van den Berghe）

我知道这个问题至少被问过100次，但是我真的不知道如何实施给出的答案。因此，我想在页面上建立一个链接，该链接链接到另一页上的特定选项卡。所以这是我目前的情况：

index.jsp：

<a href="acount.jsp/#myTabs_address">Go to Address</a>

account.jsp：

<ul class="nav nav-tabs" id="myTabs">
   <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#address" data-toggle="tab">Address</a></li>
   <li><a href="#favorites" data-toggle="tab">Favorites</a></li>
</ul>
<div class="tab-content>
   <div class="tab-pane fade in active" id="profile">
   ...
   </div>
   <div class="tab-pane fade" id="address">
   ...
   </div>
   <div class="tab-pane fade" id="favorites">
   ...
   </div>
</div>

并在我的account.jsp的标题中添加了脚本：

<script>
        // Javascript to enable link to tab
        var hash = document.location.hash;
        var prefix = "tab_";
        if (hash) {
            $('.nav-tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
        }

        // Change hash for page-reload
        $('.nav-tabs a').on('shown', function(e) {
            window.location.hash = e.target.hash.replace("#", "#" + prefix);
        });
</script>

如果我现在单击链接，它将给我404错误。

有人可以解释一下我在实施此解决方案时做错了什么吗？

提前致谢！

保罗·莱安德鲁（Paulalexandru）

我已经测试了您的示例，并且该示例完美运行，但有一个小错误。您忘记了输入“” <div class="tab-content>，因此您的示例无法正常工作。

这是完整的工作示例：

<!DOCTYPE html>
<html>
    <head>        
        <title>DEMO</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">      
    </head>
    <body>            
        <ul class="nav nav-tabs" id="myTabs">
           <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
           <li><a href="#address" data-toggle="tab">Address</a></li>
           <li><a href="#favorites" data-toggle="tab">Favorites</a></li>
        </ul>
        <div class="tab-content">
           <div class="tab-pane fade in active" id="profile">
               Profile
           </div>
           <div class="tab-pane fade" id="address">
               Adress
           </div>
           <div class="tab-pane fade" id="favorites">
               Favorites
           </div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>     
        <script>
            // Javascript to enable link to tab
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                $('.nav-tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
            }

            // Change hash for page-reload
            $('.nav-tabs a').on('shown', function(e) {
                window.location.hash = e.target.hash.replace("#", "#" + prefix);
            });
        </script>         
    </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。