tab切换

本文介绍两种网页中常见的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();
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值