文字查询焦点效果
文字查询效果,js自动设置查询条件焦点样式,如下图所示
文字查询效果,js自动设置查询条件焦点样式源代码如下,需要导入jquery框架
<style> a{text-decoration:none} a.cur{background:#00afc7;color:#fff;font-weight:bold;} </style> <div id="dvFilter"> <!--查询条件,容器div增加rel属性存储次条件的查询键名称,连接只需要生成此查询的键名称和值即可,其他已选参数js代码会自动加上--> <div rel="city"> 出发城市:<a href="" class="cur">全部</a> <a href="?city=伦敦">伦敦</a> <a href="?city=爱丁堡">爱丁堡</a> </div> <div rel="topic"> 主 题:<a href="" class="cur">全部</a> <a href="?topic=历史文化">历史文化</a> <a href="?topic=娱乐">娱乐</a> <a href="?topic=夏令营">夏令营</a> </div><!---查找href匹配添加byhref="1"这个属性--> <div rel="day" byhref="1"> 天 数:<a href="" class="cur">全部</a> <a href="?day=3">3-5天</a> <a href="?day=4">6-9天</a> <a href="?day=5">10-15天</a> </div> </div> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script> <script> /*power by showbo(http://www.w3dev.cn),keep this to fix bug*/ var comm = { //初始化url后参数键值对 initQuery: function () { this.QueryString = {}; var s = location.search.substring(1); if (s) { var m, reg = /([a-z]+)=([^&]+)/ig; while (m = reg.exec(s)) { m[1] = m[1].toLowerCase(); this.QueryString[m[1]] = (this.QueryString[m[1]] || '') + (this.QueryString[m[1]] ? ',' : '') + decodeURIComponent(m[2]); } } }, //从当前url获取连接已经存在的参数对,去掉当前连接url存在的项 getParams: function (key) { var s = '', attr, reg = new RegExp('^(' + key + ')$', 'i'); for (attr in this.QueryString) if (!reg.test(attr)) s += '&' + attr + '=' + encodeURIComponent(this.QueryString[attr]); return s.substring(1); }, //初始化话查询项连接参数和焦点 initParam: function (div) { var rel = div.attr('rel'), pms = this.getParams(rel),byhref=div.attr('byhref')=='1'; console.log(div,pms) div.find('a').attr('href', function (index, href) { console.log(this.search); return href + (pms ? (this.search ? '&' : '?') : '') + pms; }) .removeClass('cur') .filter(this.QueryString[rel] ? byhref ? '[href*="' + rel + '=' + this.QueryString[rel] + '"]' : ':contains(' + this.QueryString[rel] + ')' : ':eq(0)').addClass('cur'); }, //初始化查询 initSearchNav: function () { var dvSearchNav = $('#dvFilter'); if (dvSearchNav.length == 0) return; this.initQuery(); var me = this; dvSearchNav.find('>div').each(function () { me.initParam($(this)); }); } }; comm.initSearchNav(); </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:文字查询焦点效果