带有Bootstrap和Thymeleaf的选项卡
带有Bootstrap和Thymeleaf的选项卡
提问于 2017-11-02 03:53:25
我正在尝试创建带有内容的选项卡。这是HTML代码。当我第一次加载页面时，主选项卡处于活动状态，下一次当我单击Names时，不会发生任何操作，内容面板也不会打开。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="ID=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="panel">
<div class="panel-body">
<ul class="nav nav-tabs nav-tabs-flat nav-justified">
<li class="active"><a th:href="@{#flatmain}" data-toggle="tab">Main</a></li>
<li><a th:href="@{#flatnames}" data-toggle="tab">Names</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<!-- flat-main -->
<div class="tab-pane fade active in" id="flatmain">
<div class="row" style="padding: 1px;">
<div class="form-group">
<label class="control-label col-md-2">Main</label>
<div class="col-md-2">
<input class="form-control" id="disabledMain" type="text" placeholder="Main Value" disabled="disabled" />
</div>
</div>
</div>
</div>
<!-- flat-names -->
<div class="tab-pane fade" id="flatnames">
<div class="row" style="padding: 11px;">
<div class="form-group">
<label class="control-label col-md-2">Full Name</label>
<div class="col-md-2">
<input class="form-control" id="disabledScac" type="text" placeholder="26 Character Value" disabled="disabled" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.js"></script>
</body>
</html>我需要使用bootstrap和胸腺叶在选项卡之间进行切换。我的选项卡名称是静态的，它们始终保持不变。只有内容面板需要更改。
Stack Overflow用户
发布于 2017-11-02 04:13:44
你真的应该不时地检查一下错误控制台。它很棒(大多数时候)可以给你反馈页面在哪里中断，如果它不能加载资源，等等。
在HTTPS连接上加载页面会生成以下错误日志：
看起来你的一些或所有的脚本没有加载。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47062658
复制相关文章
相似问题
腾讯云开发者
