jquery写tab切换，有过渡效果

最新推荐文章于 2023-05-24 09:01:57 发布

冰淇淋ly

最新推荐文章于 2023-05-24 09:01:57 发布

阅读量420

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_39232387/article/details/107378510

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述
根据自己项目更改
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul,li {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			.tabBox {
				width: 400px;
				height: 200px;
				border: 1px solid pink;
			}
			.ul1 {
				height: 40px;
				border-bottom: 1px solid pink;
			}
			.ul1 li {
				width: 25%;
				line-height: 40px;
				text-align: center;
				float: left;
				cursor: pointer;
			}
			.ul1 li.active {
				background-color: pink;
				transition: all 0.6s ease-in-out;  /* 标题过渡效果 */
				position: relative;
			}
			.ul1 li.active::after {
				content: "";
				position: absolute;
				bottom: 3px;
				left: 50%;
				transform: translateX(-50%);
				width: 30%;
				height: 5px;
				background-color: red;
			}
			.ul2 {
				overflow: hidden;
			}
			.ul2 li {
				display: none;
			}
			.ul2 li.selected {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tabBox">
			<ul class="ul1">
				<li class="active">标题1</li>
				<li>标题2</li>
				<li>标题3</li>
				<li>标题4</li>
			</ul>
			<ul class="ul2">
				<li class="selected">内容内容1</li>
				<li>内容2内容2</li>
				<li>内容3内容3</li>
				<li>内容4内容4</li>
			</ul>	
		</div>
		<script type="text/javascript" src="jquery-2.1.1.js"></script>
		<script>
			$(function(){
				$(".ul1>li").mouseover(function(){
					$(this).addClass("active active::after").siblings("li").removeClass("active");
					var index = $(this).index();
					$(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide(); 
				})
			}) 
		</script>
	</body>
</html>

或者

冰淇淋ly

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery写tab切换，有过渡效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li { list-style: none; margin: 0; padding: 0; } .tabBox { width: 400px; height: 20
复制链接

扫一扫

专栏目录