Question

我正在创建一个表单，允许用户选择他们想要使用的电子邮件服务。

但是当我使用bootstrap时，链接会重新加载页面，但不会切换我需要它的标签。

实施例

如果我加载页面，然后点击“GMail”链接，它会重新加载页面，但会保留在默认选项卡上。

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Email Setup</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/stylesheets/email_setup.css">
</head>
<script type="text/javascript">
    // Javascript to enable link to tab
        console.log("ASDF");
var url = document.location.toString();
if (url.match('#')) {
   $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}

 $('.nav-tabs a').on('shown.bs.tab', function(e) {
    window.location.hash = e.target.hash;
  });

</script>
<body>
<div id="email_setup_table" class="container">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tab-default" data-toggle="tab">Select</a>
        </li>
        <li><a href="#tab-gmailTab" data-toggle="tab">Gmail</a>
        </li>
        <li><a href="#tab-yahooTab" data-toggle="tab">Yahoo</a>
        </li>
        <li><a href="#tab-outlookTab" data-toggle="tab">Outlook</a>
        </li>
        <li><a href="#tab-otherTab" data-toggle="tab">Other</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-default">
            <h3>Select Email Provider</h3>
            <a href="/email_bot/front_end/email_setup.html#tab-gmailTab">GMail</a>
            <a href="/email_bot/front_end/email_setup.html#tab-yahooTab">Yahoo</a>
            <a href="/email_bot/front_end/email_setup.html#tab-outlookTab">Outlook</a>
            <a href="/email_bot/front_end/email_setup.html#tab-otherTab">Manual Setup</a>
        </div>
        <div class="tab-pane" id="tab-gmailTab">
            <h3>Gmail Setup</h3>
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter email">
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.
                    </small>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
            </form>
        </div>
        <div class="tab-pane" id="tab-yahooTab">
            <h3>Yahoo support coming soon</h3>
        </div>
        <div class="tab-pane" id="tab-outlookTab">
            <h3>Outlook support coming soon</h3>
        </div>
        <div class="tab-pane" id="tab-otherTab">
            <h3>Other support coming soon</h3>
        </div>
    </div>
</div>
</body>
</html>

我不知道它为什么不自动切换，任何帮助都会很棒。

Answer 1

由于您点击了某个链接，因此如果您不希望该网页尝试导航，则需要阻止该链接的默认操作。

与Via JavaScript Bootstrap示例类似，您应该可以使用以下JS完成此操作。请注意jQuery document ready的$(function() {包装器，以确保页面元素已完成加载。

$(function() {
    $('#tab-default a').on('click', function(e) {
        e.preventDefault(); // Don't navigate the page
        $('.nav-tabs a[href="' + this.hash + '"]').tab('show'); // Activate the tab
    });
});

Bootstrap不按网址切换标签

1 个答案: