jQuery 练习:tab 切换
2024-08-25 09:55:43
实现内容随菜单切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
<li xxx="c2" onclick="tab(this);">菜单二</li>
<li xxx="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script>
function tab(self){
$(self).addClass("current").siblings().removeClass("current");
var s = $(self).attr("xxx");
$("#"+s).removeClass("hide").siblings().addClass("hide");
}
</script>
</body>
</html>
最新文章
- 前端性能优化的另一种方式——HTTP2.0
- 1016. Boundaries on A New Kind of Science 解题报告
- TclError: no display name and no $DISPLAY environment variable
- EditText自定义边框
- java 8 新特性
- http 请求类
- CSS选择器以及优先级与匹配原理
- VS如何设置OpenCV静态编译
- CKEditor4.x部署和配置
- Javascript的千分位和去除千分位
- css-animate制作列表鼠标移动覆盖透明层
- MyBatis代理开发(2)
- jq,ajax,post例子。
- 2-Seventeenth Scrum Meeting-20151217
- Codeforces Round #396 (Div. 2) B. Mahmoud and a Triangle 贪心
- C#基础第六天-作业答案-利用面向对象的思想去实现名片
- INSTALL_FAILED_MISSING_SHARED_LIBRARY
- (CF#257)B. Jzzhu and Sequences
- MongoDB 自动分片 auto sharding
- 《关于安卓和IOS开发》
热门文章
- Material Design 开源项目总结
- Android优化指南
- postgresql 日常sql
- 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现
- Ubuntu 16.04 下octave的使用入门
- 运维笔记--docker高效查看后台日志
- mysql 开发进阶篇系列 43 逻辑备份与恢复(mysqldump 的基于时间和位置的不完全恢复)
- sql server 高可用故障转移(5)
- pip install 安装出现问题:UnicodeEncodeError: &#39;ascii&#39; codec can&#39;t encode characters in position XX的解决办法
- shell变量定义与数组-1