Skip to content Skip to sidebar Skip to footer
Home / Django / Html / Javascript / Jquery / Twitter Bootstrap

Link To Specific Tab Bootstrap

Post a Comment
I'm developing a site with Django Framework and I'm trying to create a way for when a user access a link like http://www.example.com/site/#users_rating it opens a specific tab in t

Solution 1:

Following code works for me

HTML

<!DOCTYPE html><html><head><scriptsrc="//code.jquery.com/jquery.min.js"></script><linkhref="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"rel="stylesheet"type="text/css" /><scriptsrc="//code.jquery.com/jquery-1.9.1.min.js"></script><scriptsrc="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script><metacharset="utf-8"><title>JS Bin</title></head><body><divclass="col-md-12"style="margin: 0 auto;"><sectionclass="panel"><headerclass="panel-heading tab-bg-dark-navy-blue"><ulclass="nav nav-tabs nav-justified "><liclass="active"><adata-toggle="tab"href="#overview">
                            {% trans "Overview" %}
                        </a></li><liclass=""><adata-toggle="tab"href="#timeline">
                            {% trans "Timeline" %}
                        </a></li><liclass=""><adata-toggle="tab"href="#users_rating">
                            {% trans "Users Ratings" %} ({{ ptc.userrating.count }})
                        </a></li><liclass=""><adata-toggle="tab"href="#rating">
                            {% trans "Our Rating" %}
                        </a></li></ul></header><divclass="panel-body"><divclass="tab-content tasi-tab"><!-- Overview Tab-Pane --><divid="overview"class="tab-pane active">
                        {% include 'overview.html' %}
                    </div><!-- Timeline Tab-Pane --><divid="timeline"class="tab-pane">
                        {% include 'timeline.html' %}
                    </div><!-- User Rating Tab-Pane --><divid="users_rating"class="tab-pane">
                        {% include 'users_rating.html' %}
                    </div><!-- Our Rating Tab-Pane --><divid="rating"class="tab-pane">
                        {% include 'rating.html' %}
                    </div></div></div></section></div></body></html>

JS

<scripttype="text/javascript">
        $(function() {
          // Javascript to enable link to tabvar hash = document.location.hash;
          if (hash) {
            console.log(hash);
            $('.nav-tabs a[href='+hash+']').tab('show');
          }

          // Change hash for page-reload
          $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            window.location.hash = e.target.hash;
          });
        });
    </script>

Solution 2:

Thanks a bunch. With newer versions of JQuery (mine=3.3.1) you need to make a little alteration: 

<script>
     $(function() {
       // Javascript to enable link to tabvar hash = document.location.hash;
       if (hash) {
         console.log(hash);
         $('.nav-tabs a[href=\\'+hash+']').tab('show');
       }

       // Change hash for page-reload
       $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
         window.location.hash = e.target.hash;
       });
     });
 </script>

Hope this saves someone the hour I lost

Post a Comment for "Link To Specific Tab Bootstrap"