JQuery实现切换效果【排他思想】

Haiy_CN

已于 2022-09-01 19:41:02 修改

阅读量1.2k

点赞数 3

分类专栏： jQuery 文章标签： jquery 前端 javascript

于 2022-08-30 20:41:19 首次发布

本文链接：https://blog.youkuaiyun.com/m0_72687687/article/details/126612189

版权

该博客介绍了如何使用JQuery实现动态组件的切换效果。通过添加和删除样式实现按钮的高亮效果，并利用索引定位点击的按钮，展示对应的组件内容。同时，通过hover事件处理边框效果，click事件处理组件的显示和隐藏，实现了排他性的切换展示。

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

切换效果

$("button").click(function() {
					$(this).toggleClass("p")//获取p下标
					var index=$(this).index();
					$("p").eq(index).show(500)//显示p
					$("p").eq(index).siblings().hide(500)//隐藏其他p
			})

代码段：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/common.css" />
       <style type="text/css">
           button {
               width: 150px;
               height: 80px;
               line-height: 80px;
               fon