Welcome Guest, Not a member yet? Register   Sign In
Link to specific tab Bootstrap
#1

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?
Reply
#2

(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.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB