选项卡tab2
2024-08-24 19:05:25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0}
li{list-style: none}
a{text-decoration: none; color: #333}
.box{ width: 600px; height: 210px; margin: 50px auto 0; overflow: hidden; }
.tab_item{float: left; width: 390px; height: 210px; border-right: 1px solid #ddd; background-color: #ddd; }
.tab_item .tab_content{ height: 210px; text-align: center; line-height: 210px; font-size: 35px; } .tab_ui{ float: right; width: 200px; }
.tab_ui li{ width: 200px; text-align: center; background-color: #C84E69; }
.tab_ui li a{ display: block; height: 50px; line-height: 50px; margin-bottom: 3px; color: #fff; font-size: 20px;}
.tab_ui li.current a{ background-color: #49A945; color: #fff;}
</style>
</head>
<body>
<div class="box">
<div class="tab_item" id="tab_item">
<div class="tab_content">春天的内容</div>
<div class="tab_content" style="display: none;">夏天的内容</div>
<div class="tab_content" style="display: none;">秋天的内容</div>
<div class="tab_content" style="display: none;">冬天的内容</div>
</div>
<ul class="tab_ui" id="tab_ui">
<li class="current"><a href="javascript:;">春</a></li>
<li><a href="javascript:;">夏</a></li>
<li><a href="javascript:;">秋</a></li>
<li><a href="javascript:;">冬</a></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//选项卡
$(function(){
//点击li事件
$("#tab_ui li").click(function(){
//添加当前状态current,它的同辈元素(siblings)移除当前状态current
$(this).addClass('current').siblings('li').removeClass('current');
var z = $(this).index();//索引
//遍历找到对应的内容显示,同辈元素隐藏
$("#tab_item .tab_content").eq(z).show().siblings('#tab_item .tab_content').hide();
});
})
</script> </body>
</html>
效果图:
注意:
若a标签中的href加“#”符号,如图
则,脚本应该多加一句,“return false” 阻止跳转的意思,如图:
最新文章
- 谈c++ pb_ds库(一)rope大法好
- 利用AOP与ToStringBuilder简化日志记录
- Excel 读写程序 C#源代码下载
- HTTP、TCP、UDP以及SOCKET之间的区别/联系
- salesforce 零基础开发入门学习(十一)sObject及Schema深入
- Java maven安装GDAL
- Effective Java 25 Prefer lists to arrays
- dell 网络产品线
- C#中使用UDP通信
- 业界良心:Square开源Viewfinder,25万行代码全公布!
- hdu 4135 Co-prime(容斥)
- POJ3261-哈希
- 【转载】谈谈Cookie
- 纯CSS写九宫格样式,高宽自适应正方形
- python模块介绍- xlwt 创建xls文件(excel)
- 2018-2019-2 20175224 实验一《Java开发环境的熟悉》实验报告
- [python,2019-02-15] 最短回文串
- spring quartz执行两次问题
- 搭建openstf平台的那些事
- linux抓包命令之tcpdump