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

贴个效果图

时间: 2024-11-05 21:50:03

记录--前端 页面 jquery 被点击按钮修改样式 其他默认的相关文章

jquery实现点击按钮弹出层和点击空白处隐藏层

昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn').find('.assess').unbind().bind('click',function(event){                    //取消事件冒泡                      event.stopPropagation(); if($('.abtnBox').is

JavaScript DOM操作案例点击按钮修改div的属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="修改属性" id="bt"/> <div id=&q

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

Android基础TOP5_4:点击按钮更换样式,设置透明度

在res/drawable创建两个样式 点击前/点击后 round: 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"> 3 <!--设置渐变颜色 angle="0"是从左到右 90是从上到下 180是从右到左 --> 4 &

jq 鼠标点击跳转页面后 改变点击菜单的样式代码

点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" src="../images/c_bg01.gif" /> <ul> <a href="x_bumen.php"><li>部门设置</li></a> <a href="x_yhshez

一、JavaScript之第一个实例,点击按钮修改文本内容

一.代码如下: 二.运行后效果如下 三.点击按钮,"曾经沧海难为水"变成了日期事件了 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <h2>我的第一段 JavaScript</h2> <button type=&quo

购物车前端页面jquery效果的实现

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title&

jquery实现点击按钮滑动到指定位置

<body> <script type="text/javascript"> function click_scroll() { var scroll_offset = $("#pos").offset(); //得到pos这个div层的offset,包含两个值,top和left $("body,html").animate({ scrollTop:scroll_offset.top //让body的scrollTop等于