引导选项卡链接无法正常工作
问题描述:
我的标签不工作,每一件事情是罚款.Links不能正常工作,,请help.i想尽各种方法,但没有use.I尝试CDN,则本地文件也引导选项卡链接无法正常工作
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<ul class="nav nav-stacked nav-justified">
<li class="active"><a href="#C" data-toggle="tabs">C#</a></li>
<li><a href="#home" data-toggle="tabs">Home</a></li>
<li><a href="" data-toggle="tabs">jQuery</a></li>
<li><a href="" data-toggle="tabs">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="C">
<p>C# IS DEVELOPED BY MICROSOFT CORP IN 2000</p>
</div>
<div class="tab-pane fade" id="home">
<p>This is HOME</p>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答
您需要包括jQuery的文件运行自举即 https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js。你不需要添加任何其他jQuery代码。 而且还数据切换将是标签不是“标签”。
<ul class="nav nav-tab">
<li class="active"><a href="#C" data-toggle="tab">C#</a></li>
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#" data-toggle="tab">jQuery</a></li>
<li><a href="#" data-toggle="tab">PHP</a></li>
</ul>
+0
你是生活的救星 –
答
您需要包括引导js文件,然后也给你的菜单中选择一个ID,并添加点击处理程序来处理的标签切换,就像这样:
$('#myTab a').click(function (e) {
\t e.preventDefault();
\t $(this).tab('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<ul id="myTab" class="nav nav-stacked nav-justified">
<li class="active"><a href="#C" data-toggle="tabs">C#</a></li>
<li><a href="#home" data-toggle="tabs">Home</a></li>
<li><a href="" data-toggle="tabs">jQuery</a></li>
<li><a href="" data-toggle="tabs">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="C">
<p>C# IS DEVELOPED BY MICROSOFT CORP IN 2000</p>
</div>
<div class="tab-pane fade" id="home">
<p>This is HOME</p>
</div>
</div>
</div>
您没有包含bootstrap js文件,只有css。 –
@razethestray我连每一个文件,但仍没有发生 –
你需要运行一些JS根据文档以激活它们...... http://getbootstrap.com/javascript/#tabs –