bootstrap tab选项卡
2024-08-27 03:12:32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人中心2</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head>
<body>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#menu1" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#menu2" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#menu3" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="container tab-pane active"> </div>
<div id="menu2" class="container tab-pane "> </div>
<div id="menu3" class="container tab-pane fade"> </div>
</div>
</body>
</html>
注意:不要忘记写 【data-toggle="tab"】,没写这个不会触发点击按钮切换选项卡的事件。
附上 效果图:
最新文章
- hdu 2034 - 集合操作
- Cognition math based on Factor Space (2016.05)
- OpenStack fuel-web不可用解决办法
- 04、生成 HTMLTestRunner 测试报告
- AIX filesystemcache引发的Oracle事故
- 测试框架mochajs详解
- 用js捕捉鼠标连续点击三次事件怎么实现啊
- PAT (Advanced Level) 1002. A+B for Polynomials (25)
- Foxmail 7.0破解版,拷贝到新机器后,发送邮件乱码问题
- asp.net 文件分片上传
- 详解vuex结合localstorage动态监听storage的变化
- 集群相关、用keepalived配置高可用集群
- IdentityServer4 中文文档 -5- (简介)支持和咨询选项
- C/C++ 各种进制的表示方法/ 进制前缀
- [Linux 003]——用户和用户组以及 Linux 权限管理(一)
- 元素的定位tag_name,link_text,class_name
- 【树】Count Complete Tree Nodes
- 【原创】centos6创建sftp账号,并设置权限和目录
- extjs 事件监听 三种方式
- myBatis 切换数据源(spring事务)理解