li点击增加active效果

本文介绍了一个简单的选项卡效果实现方案,使用HTML、CSS和jQuery来完成。通过点击不同的标签项可以切换激活状态,并更改样式。

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

<!DOCTYPE html>
<html>
<head>
<title>选项卡实现原理</title>
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<style type="text/css">
    .wrap{width: 300px;list-style: none;}
    .wrap li{height: 50px;margin:1px;}
    .active{font-weight:bold; background-color: pink; color:#fff;}
</style>
</head>
<body>
<ul class="wrap">
    <li class="active">apple</li>
    <li>pear</li>
    <li>banana</li>
</ul>
<script type="text/javascript">
$(function(){
    $(".wrap li").click(function() {
        $(this).siblings('li').removeClass('active');  // 删除其兄弟元素的样式
        $(this).addClass('active');                    // 为点击元素添加类名
    });
}); 
</script>
</body>
</html>

转载:https://blog.youkuaiyun.com/pink789/article/details/83049118

<think>好的,用户问的是如何在点击不同的li元素时实现波浪形边框效果。首先,我需要理解用户的需求。他们可能是在开发一个导航菜单或者选项卡,希望用户点击时有一个动态的边框效果,增强交互体验。波浪形边框听起来像是一种流动的、动态的样式,可能需要用到CSS动画或者SVG。 接下来,我得考虑技术实现。用户之前询问过Vue中的CSS调整,所以可能他们现在是在Vue项目中实现这个效果。首先,基础的思路是给li元素添加点击事件,切换激活状态,然后通过CSS样式来表现波浪边框。 波浪形边框通常可以用CSS的伪元素和动画来实现。比如,使用::after伪元素创建一个绝对定位的覆盖层,设置边框,并应用动画。可能需要用到clip-path或者SVG来制作波浪形状。另外,考虑到兼容性和复杂度,可能使用CSS的径向渐变或者边框动画来模拟波浪效果。 另外,用户可能需要动态切换激活的li,所以需要用到Vue的响应式数据,比如使用ref来存储当前激活的索引,通过点击事件更新这个索引,并绑定class或style来触发样式变化。 考虑到性能,CSS动画通常比JavaScript操作更高效,所以优先考虑纯CSS实现。如果波浪效果比较复杂,可能需要引入SVG或者CSS的mask属性。但为了简单起见,先用CSS伪元素和动画尝试实现。 可能的步骤包括:设置li的定位为relative,以便伪元素可以绝对定位;使用伪元素创建边框,设置初始透明度为0;当激活时,透明度变为1,并启动动画;动画效果可以是缩放或移动,配合渐变色,形成波浪感。 测试过程中需要注意伪元素的层级,确保波浪边框在li内容之上,但不会干扰点击事件。同时,点击后的状态切换要流畅,动画时间不宜过长,避免影响用户体验。 最后,可能需要调整颜色、动画时间和波浪形状,以满足具体设计需求。如果用户需要更复杂的波浪效果,可能需要使用SVG或CSS clip-path来定义具体的路径,但这可能会增加实现的复杂度。 总结:使用Vue处理点击状态,CSS动画和伪元素实现波浪边框,通过动态类名控制显示与隐藏,结合渐变动画达到波浪效果。</think>以下是实现点击不同 `<li>` 产生波浪形边框效果的完整方案,包含代码示例和实现原理: ```html <template> <ul class="wave-menu"> <li v-for="(item, index) in items" :key="index" :class="{ active: activeIndex === index }" @click="activeIndex = index" > {{ item }} </li> </ul> </template> <script setup> import { ref } from 'vue' const items = ['首页', '产品', '服务', '关于', '联系'] const activeIndex = ref(-1) </script> <style scoped> .wave-menu { display: flex; gap: 2rem; padding: 2rem; list-style: none; } .wave-menu li { position: relative; padding: 1rem 2rem; cursor: pointer; transition: color 0.3s ease; } /* 波浪边框核心实现 */ .wave-menu li.active::after { content: ''; position: absolute; inset: -5px; border: 2px solid #2196f3; border-radius: 10px; animation: wave 1.2s linear infinite; opacity: 0.8; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #2196f355 10px, #2196f355 20px ); } @keyframes wave { 0% { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); } 25% { clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); } 50% { clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%); } 75% { clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%); } 100% { clip-path: polygon(0 20%, 100% 20%, 100% 0, 0 0); } } </style> ``` **实现原理分析**: 1. **交互逻辑**: - 使用 `activeIndex` 记录当前激活项 - 点击时更新激活索引值 - 通过 `:class` 绑定激活状态 2. **波浪效果核心实现**: - 利用 `::after` 伪元素创建动态边框层 - 组合使用三种关键技术: - `clip-path` 进行波浪形裁剪 - `repeating-linear-gradient` 创建条纹背景 - 关键帧动画实现波浪运动 3. **动画细节**: - 通过改变 `clip-path` 的裁剪区域产生波浪运动效果 - 渐变色背景增强波浪的立体感 - 无限循环动画保持效果持续 **扩展优化方案**: ```css /* 添加悬停效果 */ .wave-menu li:hover { color: #2196f3; transform: translateY(-2px); } /* 优化波浪颜色过渡 */ .wave-menu li.active::after { background: linear-gradient( 45deg, #2196f3 25%, #42a5f5 50%, #2196f3 75% ); background-size: 400% 400%; animation: wave 1.2s linear infinite, gradientFlow 3s ease infinite; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } ``` **技术要点总结**: 1. 伪元素定位技巧:使用 `inset: -5px` 快速实现外扩边框 2. 复合动画组合:同时应用裁剪动画和渐变动画 3. 性能优化:使用 `will-change: transform, opacity` 提升动画流畅度 4. 响应式设计:通过媒体查询适配移动端点击效果 实际项目中可根据需求调整波浪幅度(修改clip-path值)、颜色(调整渐变颜色)和运动速度(修改动画时长)等参数。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值