Question

我知道这个问题已被问到至少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错误。

有人可以解释一下我在实施this解决方案时遇到了什么问题吗？

提前致谢！

Answer 1

我已经测试了您的示例，它可以完美地处理一个小错误。你忘了放一个＆＃34;在<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>

如何使用Bootstrap 3选项卡链接到另一个页面上的特定选项卡？

1 个答案: