Question

我正在开发一个小型学校管理网络应用程序。

我制作了多个tabs（使用引导程序3 ），其中大多数tabs具有sub tabs（即，单个标签下有一个或多个标签它）。

这些子标签具有forms，可从用户那里获取数据。

问题是：单击按钮时，会将用户带到主主页选项卡。

我希望用户保留在当前选项卡（他们当前所在的位置）上。

我该怎么做？

这是代码（已改进）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keep Last Selected Bootstrap Tab Active on Page Refresh</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});

</script>
<style type="text/css">
    .bb-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bb-example">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <br>
                    <div class="row" style="height: 475px;">
                        <ul class="nav nav-tabs nav-justified" id="myTab">
                            <li id="li" class="active">
                                <a href="#Tab1" data-toggle="tab" style="color: blue;"> <span class="glyphicon glyphicon-plus"></span> &nbsp;&nbsp;Tab 1</a>
                            </li>

                            <li id="li" >
                                <a href="#Tab2" data-toggle="tab" style="color: blue;"><span class="glyphicon glyphicon-eye-open"></span> Tab 2</a>
                            </li>

                        </ul>


                     <div class="col-md-11" >
                        <div class="container" >
                            <div class="tab-content">
                                <div id="Tab1" class="tab-pane active">
                                        <div class="row">
                                            <p> Hello there! Tab 1</p>
                                            <br>
                                        </div>
                                </div>

                                <div id="Tab2" class="tab-pane">
                                        <div class="row">
                                            <p> Hello there too! Tab 2</p>
                                                 <div class="container"> 
                                            <div class="row">
                                                        <div class="col-md-8">
                                                            <br />
                                                        <form action="tab2.php" method="POST">
                                                            <div class="form-group">
                                                                <label for="InputUserName"> Enter User Name</label>
                                                                <input class="form-control" placeholder="Enter User Name" type="text" name="" id="userName">
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="userName"> Enter Password</label>
                                                                <input class="form-control" placeholder="Enter Password" type="Password" name="" id="userName">
                                                            </div>
                                                            <input type="submit" id="submit" class="btn btn-primary">
                                                        </form>


                                                    </div>
                                            </div>
                                            </div>
                                            <br>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    </div>

        </div>

    </div>
</div>
</body>
</html>

Answer 1

我认为没有人在帮助您，所以我给您解决方案。

我不花很多时间处理Web开发，但是我发现它可以使您朝正确的方向前进。

检查一下。

还有一个实时示例here。

这不是一个经过深思熟虑的代码，但是它可以起作用并且可以为您提供帮助。

这就是我的工作代码：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Keep Last Selected Bootstrap Tab Active on Page Refresh</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            console.log('here I am')
            // this add an handler when a tab is selected on myMaiTab 
            $('#myMainTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
                localStorage.setItem('activeTab', $(e.target).attr('href'));
            });
            // this add an handler when a tab is selected on mySubTab 
            $('#mySubTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
                localStorage.setItem('activeSubTab', $(e.target).attr('href'));
            });

            // Select the previous mainTab
            var activeTab = localStorage.getItem('activeTab');
            if(activeTab){
                $('#myMainTab a[href="' + activeTab + '"]').tab('show');
            }

            var activeSubTab = localStorage.getItem('activeSubTab');
            if(activeSubTab){
                $('#mySubTab a[href="' + activeSubTab + '"]').tab('show');
            }
        });
    </script>
    <style type="text/css">
        .bb-example{
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="bb-example">
        <ul class="nav nav-tabs" id="myMainTab">
            <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
            <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
            <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
        </ul>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade in active">
                <h3>Section A</h3>
                <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
            </div>
            <div id="sectionB" class="tab-pane fade">
                <h3>Section B</h3>
                <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
            </div>
            <div id="sectionC" class="tab-pane fade">
                <br>
                <div class="row" style="height: 475px;">
                    <ul class="nav nav-tabs nav-justified" id="mySubTab">
                        <li id="li" class="active">
                            <a href="#Tab1" data-toggle="tab" style="color: blue;"> <span class="glyphicon glyphicon-plus"></span> &nbsp;&nbsp;Tab 1</a>
                        </li>

                        <li id="li">
                            <a href="#Tab2" data-toggle="tab" style="color: blue;"><span class="glyphicon glyphicon-eye-open"></span> Tab 2</a>
                        </li>

                    </ul>

                    <div class="col-md-11">
                        <div class="container">
                            <div class="tab-content">
                                <div id="Tab1" class="tab-pane active">
                                    <div class="row">
                                        <p> Hello there! Tab 1</p>
                                        <br>
                                    </div>
                                </div>

                                <div id="Tab2" class="tab-pane">
                                    <div class="row">
                                        <p> Hello there too! Tab 2</p>
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <br />
                                                    <form method="POST">
                                                        <div class="form-group">
                                                            <label for="InputUserName"> Enter User Name</label>
                                                            <input class="form-control" placeholder="Enter User Name" type="text" name="user" id="userName">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="userName"> Enter Password</label>
                                                            <input class="form-control" placeholder="Enter Password" type="Password" name="password" id="Password">
                                                        </div>
                                                        <input type="submit" id="submit" class="btn btn-primary">
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <br>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</body>

</html>

您的代码中存在一些错误，下面我将向您解释这些错误，只是为了使您意识到它们。

首先，您在selected tab中的nav-tab的{{1}}上为您DOM中存在的所有导航标签添加了单个全局处理程序（您的html文件）。

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

这样，当您进入Section C并选择Tab 2时，此处理程序将触发将activeTab项保存在浏览器本地存储中，使其与外部选项卡的值重叠。

此外，您已经在DOM中的两个nav-tab中添加了相同的ID，从而使您无法以编程方式区分它们。

所以我要做的是向nav-tabs

添加不同的ID

myMainTab
mySubTab

我为他们设置了不同的处理程序：

        // this add an handler when a tab is selected on myMaiTab 
        $('#myMainTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        // this add an handler when a tab is selected on mySubTab 
        $('#mySubTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeSubTab', $(e.target).attr('href'));
        });

以便处理程序不会相互重叠。

最后一件事。

如果要捕获输入的POST值服务器端，则还需要向name属性中添加一个值：

<input class="form-control" placeholder="Enter User Name" type="text" name="user" id="userName">

<input class="form-control" placeholder="Enter Password" type="Password" name="password" id="Password">

仅此而已。希望了解您的需求。

建议：

如果可以的话，我建议您更深入地研究以下主题，以帮助您更好地控制和了解自己的发展状况：

jQuery
浏览器developer tools和how to debug your javascript code
引导程序3及其javascript section，在特定情况下，您可以使用tabs的javascript部分。

页面刷新后如何保留在相同的子选项卡上？

1 个答案: