tab切换

那个叫自己的丫头

于 2019-05-16 11:42:07 发布

阅读量830

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js简单效果文章标签： tab切换

本文链接：https://blog.youkuaiyun.com/weixin_43358199/article/details/90260500

js简单效果专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种网页中常见的Tab切换效果实现方式。一种是通过jQuery控制样式类的添加和删除来实现内容切换；另一种则是通过JavaScript函数改变元素的类名和显示状态，实现标题颜色不同且内容变化的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文内容包含两种tab切换的表现方式
第一种：常用的tab切换
点击1，2，3下面的内容切换
在这里插入图片描述
css内容

<style type="text/css">
		ul.tab,ul#ul{
			width:600px;
			height: 50px;
			overflow: hidden;
			border:1px solid #eee;
			margin: 0 auto;
			margin-top: 5px;
			padding:0;
		}
		ul.tab li,ul#ul li{
			width:199px;
			height: 50px;
			font-size:20px;
			line-height: 50px;
			text-align: center;
			float: left;
			border-right: 1px solid #eee;
			color:#333;
			cursor: pointer;
			list-style:none;
		}
		.title{
			background: #ddd;
		}
		.box,.main{
			width: 600px;
			height: 200px;
			border:1px solid #eee;
			overflow: hidden;
			margin:0 auto;
		}
		.box .con,.main .item{
			width: 600px;
			height: 200px;
			display: none;
		}
		.redTit{background:red;color:#fff;}
		.blueTit{background:blue;color:#fff;}
		.greenTit{background:green;color:#fff;}
		.main .redCon{color:red;}
		.main .blueCon{color:blue;}
		.main .greenCon{color:green;}
	</style>

html内容

	<ul class="tab">
		<li class="title">1</li>
		<li>2</li>
		<li style="border:none;">3</li>
	</ul>
	<div class="box">
		<div class="con" style="display:block;background:#FFE384;">111</div>
		<div class="con" style="background:#33a5dd;">222</div>
		<div class="con" style="background:#91c132;">333</div>
	</div>

jq代码

	$(".tab li").click(function(){
		$(this).addClass("title").siblings().removeClass();
		$(".box .con").hide().eq($('ul li').index(this)).show(); 
	});

第二种是标题颜色不同的tab切换
在这里插入图片描述

css文件同上
html代码

	<ul id="ul">
		<li class="redTit" onclick="changeColor('0','redTit','redCon')">红色</li>
		<li onclick="changeColor('1','blueTit','blueCon')">蓝色</li>
		<li onclick="changeColor('2','greenTit','greenCon')">绿色</li>
	</ul>
	<div class="main">
		<div class="item redCon" style="display:block;">我是红色的我是红色的我是红色的我是红色的我是红色的我是红色的我是红色的我是红色的</div>
		<div class="item blueCon">我是蓝色的我是蓝色的我是蓝色的我是蓝色的我是蓝色的我是蓝色的我是蓝色的</div>
		<div class="item greenCon">我是绿色的我是绿色的我是绿色的我是绿色的我是绿色的我是绿色的</div>
	</div>

js代码

var ul = document.getElementById("ul");
	var lis = ul.getElementsByTagName("li");
	function changeColor(index,colorTit,colorCon){
		$("#ul li").attr("class","");
		lis[index].className = colorTit;
		$(".main .item").hide();
		$(".main ." + colorCon).show();
	}