Question

31

Link to specific tab Bootstrap

rated 0 times [ 33] [ 2] / answers: 1 / hits: 17635 / 10 Years ago, tue, october 14, 2014, 12:00:00

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 the page.

I tried the following code that I found on the Internet (I'm new in JavaScript/JQuery), it isn't working:

<script type=text/javascript>

    $(function() {

      // Javascript to enable link to tab

      var url = document.location.toString();

      if (url.match('#')) {

        $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;

      }



      // Change hash for page-reload

      $('a[data-toggle=tab]').on('show.bs.tab', function (e) {

        window.location.hash = e.target.hash;

      });

    });

</script>

My template uses BootStrap 3, here is the HTML code (with some Django tags):

<div class=col-md-12 style=margin: 0 auto;>

        <section class=panel>

            <header class=panel-heading tab-bg-dark-navy-blue>

                <ul class=nav nav-tabs nav-justified >

                    <li class=active>

                        <a data-toggle=tab href=#overview>

                            {% trans Overview %}

                        </a>

                    </li>

                    <li class=>

                        <a data-toggle=tab href=#timeline>

                            {% trans Timeline %}

                        </a>

                    </li>

                    <li class=>

                        <a data-toggle=tab href=#users_rating>

                            {% trans Users Ratings %} ({{ ptc.userrating.count }})

                        </a>

                    </li>

                    <li class=>

                        <a data-toggle=tab href=#rating>

                            {% trans Our Rating %}

                        </a>

                    </li>

                </ul>

            </header>

            <div class=panel-body>

                <div class=tab-content tasi-tab>





                    <!-- Overview Tab-Pane -->

                    <div id=overview class=tab-pane active>

                        {% include 'overview.html' %}

                    </div>



                    <!-- Timeline Tab-Pane -->



                    <div id=timeline class=tab-pane>

                        {% include 'timeline.html' %}

                    </div>



                    <!-- User Rating Tab-Pane -->



                    <div id=users_rating class=tab-pane>

                        {% include 'users_rating.html' %}

                    </div>



                    <!-- Our Rating Tab-Pane -->



                    <div id=rating class=tab-pane>

                        {% include 'rating.html' %}

                    </div>





                </div>

            </div>



        </section>

    </div>

How can I open an specific tab according to an URL in my site?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kinsley

Add To Favorites

Follow

Total Points: 352

Total Questions: 84

Total Answers: 94

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

kinsley questions

1 Module not found: Can't resolve '@material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'

Sat, Aug 21, 21, 00:00, 3 Years ago

1 TypeError [ERR_HTTP_INVALID_HEADER_VALUE] for Algolia with Firebase

Mon, Jul 20, 20, 00:00, 4 Years ago

1 ReactJS: propTypes validation for array of objects

Mon, Nov 25, 19, 00:00, 5 Years ago

1 styled-components: extend styles and change element type

Sat, Apr 20, 19, 00:00, 5 Years ago

1 Changing the display of an element via Javascript?

Wed, Feb 20, 19, 00:00, 5 Years ago

View All

answered 10 Years ago allanw · Accepted Answer

Following code works for me

HTML

<!DOCTYPE html>

<html>

<head>

<script src=//code.jquery.com/jquery.min.js></script>

<link href=//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css rel=stylesheet type=text/css />

  <script src=//code.jquery.com/jquery-1.9.1.min.js></script>

  <script src=//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js></script>

  <meta charset=utf-8>

  <title>JS Bin</title>

</head>

<body>

<div class=col-md-12 style=margin: 0 auto;>

        <section class=panel>

            <header class=panel-heading tab-bg-dark-navy-blue>

                <ul class=nav nav-tabs nav-justified >

                    <li class=active>

                        <a data-toggle=tab href=#overview>

                            {% trans Overview %}

                        </a>

                    </li>

                    <li class=>

                        <a data-toggle=tab href=#timeline>

                            {% trans Timeline %}

                        </a>

                    </li>

                    <li class=>

                        <a data-toggle=tab href=#users_rating>

                            {% trans Users Ratings %} ({{ ptc.userrating.count }})

                        </a>

                    </li>

                    <li class=>

                        <a data-toggle=tab href=#rating>

                            {% trans Our Rating %}

                        </a>

                    </li>

                </ul>

            </header>

            <div class=panel-body>

                <div class=tab-content tasi-tab>





                    <!-- Overview Tab-Pane -->

                    <div id=overview class=tab-pane active>

                        {% include 'overview.html' %}

                    </div>



                    <!-- Timeline Tab-Pane -->



                    <div id=timeline class=tab-pane>

                        {% include 'timeline.html' %}

                    </div>



                    <!-- User Rating Tab-Pane -->



                    <div id=users_rating class=tab-pane>

                        {% include 'users_rating.html' %}

                    </div>



                    <!-- Our Rating Tab-Pane -->



                    <div id=rating class=tab-pane>

                        {% include 'rating.html' %}

                    </div>

                </div>

            </div>



        </section>

    </div>

</body>

</html>

JS

    <script type=text/javascript>

        $(function() {

          // Javascript to enable link to tab

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