current tab active after a page reload - bootsrap

Question

I have the following Bootstrap tabs :-

            <ul class="nav nav-tabs">
            <li class="active">
                <a href="#1" data-toggle="tab">
                    <span class="glyphicon glyphicon-wrench"></span>
                    Tab 1
                </a>
            </li>
            <li>
                <a href="#2" data-toggle="tab">
                    <span class="glyphicon glyphicon-tint"></span>
                    Tab 2
                </a>
            </li>
            <li>
                <a href="#3" data-toggle="tab">
                    <span class="glyphicon glyphicon-plus-sign"></span>
                    Tab 3
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="1">
                <table class="table table-condensed table-bordered table-striped volumes">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th class="tdTitle">Age</th>
                            <th class="tdTitle">Grade</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td >James Smith</td>
                            <td >14</td>
                            <td >7</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td >John Dolan</td>
                            <td >11</td>
                            <td >3</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td >George Eliott</td>
                            <td >12</td>
                            <td >16</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="tab-pane fade" id='2'>
                <table class="table table-condensed table-bordered table-striped volumes">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th class="tdTitle">Salary</th>
                            <th class="tdTitle">WorkPlace</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td >James Smith</td>
                            <td >44000</td>
                            <td >London</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td >John Dolan</td>
                            <td >52000</td>
                            <td >Munich</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td >George Eliott</td>
                            <td >40000</td>
                            <td >Berlin</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id='3'>
                <table class="table table-condensed table-bordered table-striped volumes">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th class="tdTitle">Married</th>
                            <th class="tdTitle">Kids</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td >James Smith</td>
                            <td >Yes</td>
                            <td >3</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td >John Dolan</td>
                            <td >No</td>
                            <td >0</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td >George Eliott</td>
                            <td >Yes</td>
                            <td>1</td>
                        </tr>
                    </tbody>

                </table>
            </div>
        </div>

And I wish to be able to get the last active tab on page reload, so I added the following JQuery :-

$(function () {
            //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                //save the latest tab; use cookies if you like 'em better:
                localStorage.setItem('lastTab', $(e.target).attr('href'));
            });

            //go to the latest tab, if it exists:
            var lastTab = localStorage.getItem('lastTab');
            alert(lastTab);
            if (lastTab) {
                $(lastTab).tab('show');
            }
        });

I changed the Jquery and now I am managing to get the lastTab correctly, however still when refreshing, I am always showing the first tab.

Can you please help me?

Thanks for your help and time

score 1 · Answer 1 · answered Mar 27 '15 at 12:44

ok managed to solve it!

            $(function () {
            //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                //save the latest tab; use cookies if you like 'em better:
                localStorage.setItem('lastTab', $(e.target).attr('href'));
            });

            //go to the latest tab, if it exists:
            var lastTab = localStorage.getItem('lastTab');
            if (lastTab) {
                $('a[href=' + lastTab + ']').tab('show');
            }
            else {
                // Set the first tab if cookie do not exist
                $('a[data-toggle="tab"]:first').tab('show');
            }
        });

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

You'll have to use localstorage or cookies to manage that. See here some answers: How do I keep the current tab active with twitter bootstrap after a page reload?

edited May 23 '17 at 11:45

Community

1
1

answered Mar 27 '15 at 11:52

GhitaB

3,275
3
33
62

I have already seen multiple examples but nothing worked! I cannot target my div let alone store it in the localstorage! – JMon Mar 27 '15 at 11:57

current tab active after a page reload - bootsrap

2 Answers2