专注前端行业精选
jq简单实现选项卡效果
作者：鹏仔先生日期：2020-06-19 15:36:34浏览：3551分类：JavaScript
很简单的一个demo，平时经常用到，整理下，每次用直接复制粘贴挺香的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ实现选项卡-</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 300px;
box-sizing: border-box;
}
.tab-box{
width: 500px;
display: flex;
align-items: center;
}
.tab-box span{
color: #fff;
font-size: 16px;
line-height: 30px;
text-align: center;
display: inline-block;
width: 100px;
background: #000;
cursor: pointer;
}
.tab-box .active{
background: skyblue;
}
.content div{
display: none;
}
.content .active{
display: block;
}
</style>
</head>
<body>
<div class="tab-box">
<span class="active">tab-1</span>
<span>tab-2</span>
<span>tab-3</span>
<span>tab-4</span>
<span>tab-5</span>
</div>
<div class="content">
<div class="active">内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
<div>内容5</div>
</div>
</body>
</html>
<script>
$(".tab-box span").click(function(){
// 给当前的添加类名，并清除同级其他的类名
$(this).addClass("active").siblings().removeClass("active");
// 获取当前点击的索引
var index = $(this).index();
// 对应索引对应的添加类名active，并清楚同级其他的类名
$(this).parent().siblings().children().eq(index).addClass("active").siblings().removeClass("active");
})
</script>
- 上一篇：使用c3动画实现摇铃铛效果
- 下一篇：使用jq实现二级菜单效果，jq下拉菜单效果
猜你还喜欢
- 09-14 nvm常用命令有哪些？nvm如何切换node版本？nvm如何下载node？
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参，微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载（以及下载跨域问题分析）
- 07-08 uniapp调用地图，进行位置查询，标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符，js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用，uniapp首行缩进不管用如何解决？
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能（CSS实现语音音阶动画效果）
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论，来添加一个吧。