jq 实现简单tab切换

最新推荐文章于 2022-12-21 19:37:59 发布

一个程序员的春天

最新推荐文章于 2022-12-21 19:37:59 发布

阅读量642

点赞数 1

分类专栏： js javascript jquery 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/weixin_44186787/article/details/106121106

版权

js 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

jquery

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.navigation p {
float: left;
margin: 0px 20px;
}

.navigation {
overflow: hidden;
}

.box+.box {
display: none;
}
</style>
</head>

<body>

<div class="navigation">
<p class="a">哈哈1</p>
<p class="a">哈哈2</p>
<p class="a">哈哈3</p>
</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js"></script>
<script>
$(function () {
$(".navigation .a").each(function (i) {
$(this).click(function () {
$(".box").eq(i).show();
$(".box").not($(".box").eq(i)).hide();
$(".navigation .a").removeClass("checked");
$(this).addClass("checked");
})
})
})
</script>
</body>

</html>

一个程序员的春天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 实现简单tab切换

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.navigation p {float: left;margin: 0px
复制链接

扫一扫