Link to specific tab Bootstrap

Link to specific tab Bootstrap - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Model-View-Controller (https://forum.codeigniter.com/forumdisplay.php?fid=10)
+--- Thread: Link to specific tab Bootstrap (/showthread.php?tid=61634)

Link to specific tab Bootstrap - zeli - 05-02-2015

I'm using codeigniter and I'm having the same problem of the topic:

Link to specific tab Bootstrap

I'm trying as follows but to no sucess:

Code:
<ul class="nav nav-pills nav-stacked">

    <li class="<?php echo ($acao == 'listar') ? 'active' : ''; ?>">

        <a href="#mytab1" data-toggle="tab">

            <i class="fa fa-cogs"></i>&nbsp;Name Link My tab 1

        </a>

    </li>

    <li class="<?php echo ($acao == 'cadastro') ? 'active' : ''; ?>">

        <a href="#mytab2" data-toggle="tab">

            <i class="fa fa-folder-open"></i>&nbsp;Name Link My tab 2

        </a>

    </li>

    <li class="<?php echo ($acao == 'tipos') ? 'active' : ''; ?>">

        <a href="#mytab2" data-toggle="tab">

            <i class="fa fa-cogs"></i>&nbsp;Name Link My tab 3

        </a>

    </li>

</ul>

In the footer:

Code:
<script type="text/javascript">

        $(function() {

          // Javascript to enable link to tab

          var hash = document.location.hash;

          if (hash) {

            console.log(hash);

            $('.nav-stacked 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>

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

<script src="<?php echo site_url('assets/js/jquery-1.10.2.min.js'); ?>"></script>

<script src="<?php echo site_url('assets/js/jquery-migrate-1.2.1.min.js'); ?>"></script>

<script src="<?php echo site_url('assets/js/jquery-ui.js'); ?>"></script>

also I tried changing the class in line for:

Code:
$('.nav-pills a[href='+hash+']').tab('show');

and put in the head javascript, but it did not work, where I am wrong?

RE: Link to specific tab Bootstrap - mwhitney - 05-05-2015

(05-02-2015, 08:57 PM)zeli Wrote: In the footer:

Code:
<script type="text/javascript"> $(function() { // Javascript to enable link to tab var hash = document.location.hash; if (hash) { console.log(hash); $('.nav-stacked 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> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="<?php echo site_url('assets/js/jquery-1.10.2.min.js'); ?>"></script> <script src="<?php echo site_url('assets/js/jquery-migrate-1.2.1.min.js'); ?>"></script> <script src="<?php echo site_url('assets/js/jquery-ui.js'); ?>"></script>

Since your code requires jQuery, it should be included after all of the jQuery includes, not before them. You're also going to want it to be after any bootstrap scripts.