gpt4 book ai didi

html - 导航栏不显示任何内容

转载 作者:太空宇宙 更新时间:2023-11-04 09:40:01 25 4
gpt4 key购买 nike

我正在尝试使用包含 3 个链接的导航栏。在每个选项卡中,我想显示一个表格,当我单击另一个链接时,我想显示另一个表格。

我正在尝试使用下面的代码执行此操作,但它不起作用。页面上没有显示任何内容。

你明白为什么它不起作用吗?

html:

<body>
<div class="container">
<div class=".md-xs-4">
<ul class="nav nav-pills">
<li>
<a href="#Table">Table Link</a>
</li>
<li>
<a href="#Table2">Tabl2 Link</a>
</li>
</ul>
</div>
<div class=".md-xs-4">
<div class="tab-content">
<div class="tab-pane fade" id="Table">
<table class="table" style="border: 1px solid #ddd;">
<td>a</td>
<td>b</td>
</table>

<div class="tab-content">
<div class="tab-pane fade" id="Table2">
<table class="table" style="border: 1px solid #ddd;">
<td>a</td>
<td>b</td>
</table>

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

https://jsfiddle.net/z2kLaxaj/

最佳答案

您的语法有点不对劲 - 而且您的 fiddle 中缺少 jQuery。将以下代码添加到您的 <head>在加载 bootstrap.js 之前:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

你的代码应该是这样的:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#table1">Table Link</a>
</li>
<li><a data-toggle="pill" href="#table2">Table Link 2</a>
</li>
</ul>

<div class="tab-content">
<div id="table1" class="tab-pane fade in active">
<table class="table" style="border: 1px solid #ddd;">
<td>a</td>
<td>b</td>
</table>
</div>
<div id="table2" class="tab-pane fade">
<table class="table" style="border: 1px solid #ddd;">
<td>a</td>
<td>b</td>
</table>
</div>
</div>
</div>

关于html - 导航栏不显示任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40006238/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com