让选项卡适用于 BootStrap
Getting Tabs to work for BootStrap
我已经浏览了其他各种示例,但我仍然无法使用我的引导选项卡。我的代码如下。谁能帮我一把?
<body>
<ul class="nav nav-tabs" id = "myTab">
<li class = "active"><a href= "home" data-toggle="tab">Home</a></li>
<li><a data-target="About" data-toggle="tab">About</a></li>
<li><a data-target="Events" data-toggle="tab">Events</a></li>
<li><a data-target="LargeGroups" data-toggle="tab">Large Groups</a></li>
<li><a data-target="SmallGroups" data-toggle="tab">Small Groups</a></li>
<li><a data-target="Admin" data-toggle="tab">Admin</a></li>
</ul>
<div tab-content>
<div class= "tab-pane active" id="About" >
<p>And this is the about tab.</p>
</div>
<div id="Events" class="tab-pane">
<p>And this is the photo tab.</p>
</div>
<div id="LargeGroups" class="tab-pane">
<p>This is the Large Groups tab.</p>
</div>
<div id="SmallGroups" class="tab-pane">
<p>Hi, this is the small groups tab.</p>
</div>
</div><!-- /.tab-content -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
你需要更改标记:
文档: http://getbootstrap.com/javascript/#tabs
为此更改您的代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation"><a href="#About" aria-controls="settings" role="tab" data-toggle="tab">About</a></li>
<li role="presentation"><a href="#Events" aria-controls="settings" role="tab" data-toggle="tab">Events</a></li>
<li role="presentation"><a href="#LargeGroups" aria-controls="settings" role="tab" data-toggle="tab">Large Groups</a></li>
<li role="presentation"><a href="#SmallGroups" aria-controls="settings" role="tab" data-toggle="tab">Small Groups</a></li>
<li role="presentation"><a href="#Admin" aria-controls="settings" role="tab" data-toggle="tab">Admin</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class= "tab-pane active" id="About" >
<p>And this is the about tab.</p>
</div>
<div id="Events" class="tab-pane">
<p>And this is the photo tab.</p>
</div>
<div id="LargeGroups" class="tab-pane">
<p>This is the Large Groups tab.</p>
</div>
<div id="SmallGroups" class="tab-pane">
<p>Hi, this is the small groups tab.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body>
</html>
不使用javascripthttp://jsfiddle.net/t88n213w/
<li><a href="#About" data-toggle="tab">About</a></li>
演示 - http://www.bootply.com/unCKEJAvGD
更改您的 HTML 标记,您缺少很多东西
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
</li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede mollis pretium. Integer tincidunt. Cras</div>
<div role="tabpanel" class="tab-pane" id="profile">nec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue vel</div>
<div role="tabpanel" class="tab-pane" id="messages">s varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur u</div>
<div role="tabpanel" class="tab-pane" id="settings">us eget condimentum rhoncus, sem quam semper libero, sit ame</div>
</div>
</div>
相关文章:
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- PHP中的setcookie仅适用于localhost
- AngularJS/HTML/Bootstrap元素用于动态搜索结果
- html5 drawImage适用于firefox,而不是chrome
- 提供“;onClick"适用于iPad(触摸屏)和桌面用户的默认功能
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- ResolveUrl是否适用于././也
- Firebase updateChildValues适用于IOS,但不适用于Web和Android
- JavaScript警报适用于int,但不适用于string
- SQLite插件适用于Mac和Windows,但不适用于手机上的Safari
- Regex Replace仅适用于Last Match
- window.onload适用于aspx页面,但不适用于普通html
- Jquery Ajax POST不工作.适用于GET
- 画布上的自定义字体仅适用于safari
- Javascript仅适用于alert()和Debug模式
- 让选项卡适用于 BootStrap
- jQuery Bootstrap适用于Firefox,但不适用于IE10
- Bootstrap 3 Modal内置texarea.当点击/聚焦文本区域时,背景滚动到顶部.仅适用于iOS 8
- jQuery UI和Bootstrap之间的冲突也适用于“buttonset”
- Bootstrap日期拾取器仅适用于firefox