Jquery 引导不按url切换选项卡_Jquery_Html_Twitter Bootstrap

Jquery 引导不按url切换选项卡

jquery html twitter-bootstrap

Jquery 引导不按url切换选项卡,jquery,html,twitter-bootstrap,Jquery,Html,Twitter Bootstrap,我正在创建一个表单，允许用户选择他们想要使用的电子邮件服务但是，当我使用引导时，链接会重新加载页面，但不会切换我需要的选项卡范例如果我加载页面，并单击“GMail”链接，它将重新加载页面，但仍保留在默认选项卡上这是我的密码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Email Setup</title>

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

但是，当我使用引导时，链接会重新加载页面，但不会切换我需要的选项卡

范例

如果我加载页面，并单击“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>


电子邮件设置
//启用链接到选项卡的Javascript
控制台日志（“ASDF”）；
var url=document.location.toString（）；
if（url.match（'#'））{
$（'.nav tabs a[href=“#'+url.split（'#'）[1]+'''']）.tab（'show'）；
}
$（'.nav tabs a'）.on（'show.bs.tab'，函数（e）{
window.location.hash=e.target.hash；
});











选择电子邮件提供商
Gmail设置
电子邮件地址
我们永远不会与其他人共享您的电子邮件。
密码
雅虎的支持即将到来
Outlook支持即将推出
其他支持即将到来

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

因为您正在单击一个链接，如果您不希望页面尝试导航，您需要阻止该链接的默认操作

与Bootstrap示例类似，您应该能够通过以下JS实现这一点。注意

$（function（）{

包装器，它是jQuery的包装器，用于确保页面元素已完成加载

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