Twitter bootstrap 如何使用Bootstrap3选项卡链接到其他页面上的特定选项卡？_Twitter Bootstrap_Twitter Bootstrap 3

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

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 如何使用Bootstrap3选项卡链接到其他页面上的特定选项卡？,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我知道这个问题至少被问了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

我知道这个问题至少被问了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>






我已经测试了你的例子，它工作得很好，只有一个小错误。你忘了在
<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>

<!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>