• 记录--前端 页面 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>

    贴个效果图

  • 相关阅读:
    js获取当前日期
    Mysql错误1452
    数字输入框禁止输入字母
    laravel关联外键报错
    golang for range channel
    golang实现简单哈希表(拉链法解决冲突)
    K个一组反转链表(golang)
    golang 少见的语法问题(无用)
    golang实现循环队列
    数组中连续序列和最大值(循环数组)
  • 原文地址:https://www.cnblogs.com/dscs/p/5281839.html
Copyright © 2020-2023  润新知