记录--前端 页面 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>
复制代码

贴个效果图

 

posted @   大叔陈说  阅读(1652)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 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 构建精确任务处理应用
点击右上角即可分享
微信分享提示