<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#menu2">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>
视频部分应该在 html 上显示 youtube 而不是在页面上。
我检查了 jquery 是否在 bootstrap.js 之前加载。但它仍然无法正常工作。原来选项卡按钮没有正常工作。虽然当你点击图像按钮图像部分将被显示。是只有输入标签的问题吗?
最佳答案
工作片段:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>
jQuery 需要在指向正确 tab-pane
的选项卡中的 anchor 标记中使用正确的 href
。
您正在使用:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#menu2">Video</a>
</li>
</ul>
您需要让 Video
的 href
指向 #video
,如下所示:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>
关于javascript - 为什么 Bootstrap 的选项卡不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38025084/