文字查询焦点效果

  文字查询效果,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>

 


原创文章,转载请注明出处:文字查询焦点效果

评论(0)Web开发网
阅读(95)喜欢(0)不喜欢(0)JavaScript/Ajax