当前位置： 移动技术网 > IT编程>网页制作>HTML > jquery写tab切换，有过渡效果

jquery写tab切换，有过渡效果

2020年07月17日  | 移动技术网IT编程  | 我要评论

效果：
在这里插入图片描述
代码：

<!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;  /* 标题过渡效果 */
			}
			.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").siblings("li").removeClass("active");
					var index = $(this).index();
					$(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide(); 
				})
			}) 
		</script>
	</body>
</html>

本文地址：https://blog.csdn.net/qq_39232387/article/details/107378510

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网