CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Kenneth Van den Berghe
Kenneth Van den Berghe

Reputation: 275

How to link to specific tab on other page using Bootstrap3 tabs?

I know this question has been asked at least 100 times, but I really can't figure out how to implement the answers given. So I want to make a link on a page that links to a specific tab on another page. So here is my current situation:

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>

and in the header of my account.jsp i added the 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>

If i now click on the link, it gives me a 404 error.

Can someone please explain what I'm doing wrong in implementing this solution?

Thanks in advance!

Upvotes: 1

Views: 2355

Answers (1)

paulalexandru
paulalexandru

Reputation: 9530

I've tested your example and it works perfectly with one little error. You forgot to put a " in <div class="tab-content> and because of that your example is not working.

Here is the complete working example:

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

Upvotes: 1

Related Questions