Question

因为我是jQuery的新手所以我正在做简单的练习。我做了简单的标签。

我正在尝试location.reload()功能。

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tabs</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
    <body>

    <div class="container">
        <h2>Tabs Testing</h2>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
            <li><a data-toggle="tab" href="#menu2">Tab2</a></li>
            <li><a data-toggle="tab" href="#menu3">Tab3</a></li>
            <li><a data-toggle="tab" href="#menu4">Tab4</a></li>
        </ul>

            <div class="tab-content">
                <div id="menu1" class="tab-pane fade in active">
                    <h3>Menu 1</h3>
                        <p> This is tab one</p>
                </div>
                <div id="menu2" class="tab-pane fade">
                    <h3>Menu 2</h3>
                        <p>This is tab two</p>
                </div>
                <div id="menu3" class="tab-pane fade">
                    <h3>Menu 3</h3>
                        <p>This is tab three</p>
                        <button type="submit" class="btn btn-primary" onclick="myFunction()">Reload Page</button>
                </div>
                <div id="menu4" class="tab-pane fade">
                    <h3>Menu 4</h3>
                        <p>This is tab four</p>
                </div>
            </div>
        </div>
        <script>
            function myFunction() {
                location.reload();
            }
        </script>
    </body>
</html>

所以在Tab3我插入一个按钮，你可以看到我编写了简单的js函数，通过调用该函数它将重新加载页面。

所以这就是我卡住的地方，当页面重新加载时我试图保持选定的标签处于活动状态，即Tab3。但重新加载后，Tab1将处于活动状态。

所以我检查了其他问题和答案，但我发现理解起来很复杂。

任何有用的帮助。提前谢谢。

Answer 1

它不起作用的原因是因为浏览器不知道它应该在重新加载后显示该特定选项卡。显示网站特定部分的一种方法是使用位置哈希。

$(function() {
    // get the current hash
    var hash = document.location.hash;

    // open the appropriate tab if a hash exists
    if (hash) {
        $('.nav-tabs a[href='+hash+']').tab('show');
    }

    // Update the hash each time the tab is shown
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        window.location.hash = e.target.hash;
    });
});

<小时/> 如果您希望简单易懂，此解决方案使用this插件。

下载此文件并将其添加到您的脚本中：https://raw.githubusercontent.com/aidanlister/jquery-stickytabs/master/jquery.stickytabs.js

GitHub不喜欢热链接，所以不要热链接。

在myFunction()下方添加以下内容：

$(function() {
    $('.nav-tabs').stickyTabs();
});

Answer 2

为所有四个标签提供不同的ID。然后用id's写出相同的onclick函数：onClick ="myFunction(id)"你的jquery是：

function myFunction (id) {
 $("id").addClass('active'); 

 }

Answer 3

更新：将id="loadIt"属性添加到按钮中，如下所示：

<button id="loadIt" type="submit" class="btn btn-primary">Reload Page</button>

然后试试这个片段：

<script>
    var url, id;
    $('#loadIt').on('click', function(event) {
        event.preventDefault();
        url = window.location.href;
        id = ((/#menu/).test(url)) ? "" : '#' + $(this).closest('div').attr('id');
        // console.log(url + id);
        window.location.replace(url + id);
    });
</script>

JSFiddle希望它能奏效。

jQuery选项卡正在重新加载

3 个答案: