Question

我有以下Bootstrap标签： -

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

我希望能够在页面重新加载时获得最后一个活动选项卡，所以我添加了以下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');
            }
        });

我更改了Jquery，现在我正在设法正确获取lastTab，但是在刷新时，我总是显示第一个标签。

你能帮帮我吗？

感谢您的帮助和时间

Answer 1

确定设法解决了！

            $(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');
            }
        });

Answer 2

您必须使用localstorage或Cookie来管理它。在这里看到一些答案：How do I keep the current tab active with twitter bootstrap after a page reload?

页面重新加载后，当前选项卡处于活动状态 - 引导程序

2 个答案: