jquery动态改变css

最新推荐文章于 2024-07-14 18:35:32 发布

杨鲜生

最新推荐文章于 2024-07-14 18:35:32 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html5 Javascript

本文链接：https://blog.youkuaiyun.com/u013252047/article/details/68929315

Javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

Html5

2 篇文章

订阅专栏

本文介绍如何使用jQuery动态地改变div元素的CSS属性来实现Tab菜单的切换效果。具体包括HTML结构定义、CSS样式设置及jQuery交互逻辑实现。

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

一说明

jquery动态改变div的css属性，实现如图的效果

未点击之前

点击了第二个tab之后变成这样的样子

二实现

1.html代码

<div class="flex-container">

	<div class="flex-item flex-item-normal"> 概  况 </div>

	<div class="flex-item flex-item-normal">信息情感意识</div>

<div class="flex-item flex-item-normal">信息科学知识</div><div class="flex-item flex-item-normal">信息处理能力</div><div class="flex-item flex-item-normal">信息伦理道德</div></div>

2.css代码

.flex-container{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: 20px 20% 0px 20%;
   font-size: 16px;
}
.flex-item {
 margin: 0 auto;
 padding: 15px;
 cursor: pointer;
 border: 1px solid #3bb2d0;
}
.flex-item-active{
	background: #FFFFFF;
	color: #3bb2d0;
}
.flex-item-normal{
	background: #3bb2d0;
	color: #FFFFFF;
}

3.js代码

$(".flex-item").click(function(){
	$(".flex-container").find(".flex-item-active").removeClass("flex-item-active").addClass("flex-item-normal");
	$(this).removeClass("flex-item-normal").addClass("flex-item-active");
});