记录--前端 页面 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>
贴个效果图
记录--前端 页面 jquery 被点击按钮修改样式 其他默认的更多相关文章
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
- [Django] html 前端页面jQuery、图片等路径加载问题
严格的说这个话题应该属于一个html前端路径加载问题.为了实现一个局部更新页面的功能,简单了解了一下Ajax.Ajax是一个为了实现浏览器和服务器异步通信功能的模块.严格来说不是一个新的语言,只是JS ...
- Android基础TOP5_4:点击按钮更换样式,设置透明度
在res/drawable创建两个样式 点击前/点击后 round: <?xml version="1.0" encoding="utf-8"?> ...
- jq 鼠标点击跳转页面后 改变点击菜单的样式代码
点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...
- 一、JavaScript之第一个实例,点击按钮修改文本内容
一.代码如下: 二.运行后效果如下 三.点击按钮,"曾经沧海难为水"变成了日期事件了 <!DOCTYPE html> <html> <meta htt ...
- jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...
- jquery实现点击按钮滑动到指定位置
<body> <script type="text/javascript"> function click_scroll() { var scroll_of ...
- jquery 实现点击按钮后出现倒计时效果(用于实现发送手机验证码、邮箱验证码)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 炫酷的sublimeText开发工具 快捷键总结
sublimeText3绝对是写前端程序的利器.占内存小.启动快.代码提示功能齐全,界面酷炫并且再也不怕断电.了 网上搜罗一些快捷键总结一下.先来张图: (事实上sublimeText3也能够写 ...
- Android自己定义button实现长按功能
Android自己定义button实现长按功能 通过自己定义BUTTON,写一个LongTouchBtn类,在按下的时候运行onTouchEvent事件,通过这个事件使用回调函数来实现长按功能! XM ...
- MYSQL百万级数据,如何优化
MYSQL百万级数据,如何优化 首先,数据量大的时候,应尽量避免全表扫描,应考虑在 where 及 order by 涉及的列上建立索引,建索引可以大大加快数据的检索速度.但是,有些情况索引是 ...
- select * from (select user())a 为什么是查询user()的意思?
步骤:1.先查询 select user() 这里面的语句,将这里面查询出来的数据作为一个结果集 取名为 a2.然后 再 select * from a 查询a ,将 结果集a 全部查询出来
- Android编程之常识 - 混淆
1,什么是混淆编译 ProGuard是一个免费的java类文件压缩,优化,混淆器.它探测并删除没有使用的类,字段,方法和属性.它删除没有用的说明并使用字节码得到最大优化.它使用无意义的名字来重命名类, ...
- Timus Online Judge 1057. Amount of Degrees(数位dp)
1057. Amount of Degrees Time limit: 1.0 second Memory limit: 64 MB Create a code to determine the am ...
- DLL内存分配与共享
一旦DLL的文件映像被映射到调用进程的地址空间中,DLL的函数就可以供进程中运行的所有线程使用.实际上,DLL几乎将失去它作为DLL的全部特征.对于进程中的线程来说,DLL的代码和数据看上去就像恰巧是 ...
- Linux rm 删除指定文件外的其他文件 方法汇总
一.Linux下删除文件和文件夹常用命令如下: 删除文件: rm file 删除文件夹: rm -rf dir 需要注意的是, rmdir 只能够删除 空文件夹 . 二.删除制定文件(夹)之外的所有文 ...
- iOS Core ML与Vision初识
代码地址如下:http://www.demodashi.com/demo/11715.html 教之道 贵以专 昔孟母 择邻处 子不学 断机杼 随着苹果新品iPhone x的发布,正式版iOS 11也 ...
- HDU - 1358 - Period (KMP)
Period Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...