记录--前端 页面 jquery 被点击按钮修改样式 其他默认
jquery实现页面条件筛选
此功能类似淘宝的条件筛选,主要是页面样式的更改,问了大神也磨磨唧唧了很久才搞定0.0....
先贴代码.....
代码知识有
border-radius 设置圆角边框
siblings() 同胞元素,这个是重点
<style type="text/css"> .list dd{margin:-20px 0px 0px 40px;} .list dd a{padding-right:10px; text-decoration: none;} .se{ display:inline-block; padding:2px 6px; background-color: red; border-radius:2px; text-align: center;} </style> <script type="text/javascript"> $(function(){ }) function ck(id,zhi,obj){ $(id).val(zhi); /*复制给隐藏域input*/ $(obj).addClass('se'); /*这里是添加样式,其中的se指的是class样式* $(obj).siblings().removeClass('se'); /*这里是移除同胞(同级)样式,其中的se指的是class样式*/ /* $(obj).attr('style','color:red;'); 这里用了两种方式在jquery更改样式,个人觉得上面那种更方便 $(obj).siblings().attr('style',''); */ var tt=$('#yilou').val(); var bb=$('#erlou').val(); alert(tt); alert(tt+"---"+bb);
$.post('../demo/cssDemo',{'tt':$('#yilou').val(),'bb':$('#erlou').val()},function(data){ /* 异步请求*/
alert(data);
})
} </script> <div class="list"> <dl> <dt>一楼</dt> <dd> <a href="javascript:void(0)" onclick="ck('#yilou','1',this)">一房</a> <a href="javascript:void(0)" onclick="ck('#yilou','2',this)">二房</a> <a href="javascript:void(0)" onclick="ck('#yilou','3',this)">三房</a> <input type="hidden" id="yilou"/> </dd> </dl> <dl> <dt>二楼</dt> <dd> <a href="javascript:void(0)" onclick="ck('#erlou','1',this)">一房</a> <a href="javascript:void(0)" onclick="ck('#erlou','2',this)">二房</a> <a href="javascript:void(0)" onclick="ck('#erlou','3',this)">三房</a> <input type="hidden" id="erlou"/> </dd> </dl> </div>
贴个效果图
分类:
前端
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用