您的足迹:首页 > web前端 >jquery实现点击a链接,跳转之后,该a链接标签处改变背景色的方法

jquery实现点击a链接,跳转之后,该a链接标签处改变背景色的方法

jquery实现点击a链接,跳转之后,该a链接标签处改变背景色的方法
 a标签是点击的链接,获取跳转后url的值(或者如果url里有参数,也可通过获取参数值),再获取a标签链接的对象(或某一属性值),通过each循环比较两者的值,对比之后,Url(或者url的某一参数值)相同的,去掉点击之前那个a对象的class属性,并给现在的a链接加上样式。
代码示例:

首先引入jQuery文件;
<script src="http://code.jquery.com/jquery-latest.js"></script>
方法一:
<script type="text/javascript">
$(document).ready(function(){
$(".navList a").each(function(){//each循环
     //console.log($($(this))[0].href);// 结果:localhost/jz/whaleinfo.php?cat=yule,在循环里会有多条显示
     var length = String(window.location).lastIndexOf('?');//jquery的lastIndexof返回的是该符号最后一次出现的位置,即数字。可以得到url的?出现的位置
     var url = String(window.location).substring(0,length);//substring是截取字符串的函数。我们这里是表示,从第0位开始截取,截取的长度是length值
    if ($($(this))[0].href == url) {
         $(this).siblings().removeClass('cur');
         $(this).addClass('cur');
    }
}
});
</script> 


//方法二:通过参数比较

<script type="text/javascript">
//对当前点击对象(通道号按钮)更换css样式
$(document).ready(function(){
 $(".navList a").each(function(){//each循环
 if(getQueryString('cat')== $(this).attr("cat")){//循环遍历判断如果url的cat参数值和标签的cat属性值相同,则改变此标签的颜色
 $(this).siblings().removeClass('cur');
 $(this).addClass('cur');
 }
 });
});   
//获取URL中的参数 方法1
function getQueryString(name) {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 return r != null ? unescape(r[2]) : null;
}
</script> 


 html代码:
<style>
.navList .cur {
    font-weight: 700;
}
</style>
<div class="head-body">
      <div class="navList">
           <a href="http://localhost/jz/whaleinfo.php?cat=yule"  cat="yule" class="navItem  " >娱乐</a>    
           <a href="http://localhost/jz/whaleinfo.php?cat=tuijian"cat="tuijian" class="navItem ">推荐</a>
           <a href="http://localhost/jz/whaleinfo.php?cat=shenghuo" cat="shenghuo" class="navItem ">生活</a>
           <a href="http://localhost/jz/whaleinfo.php?cat=tiyu"   cat="tiyu" class="navItem "  >体育</a>
           <a href="http://localhost/jz/whaleinfo.php?cat=qinggan" cat="qinggan" class="navItem ">情感</a>
           <a href="http://localhost/jz/whaleinfo.php?cat=xingzuoshengxiao" cat="xingzuoshengxiao"  class="navItem ">星座</a>
       <a href="http://localhost/jz/whaleinfo.php?cat=meishi"  cat="meishi" class="navItem " >美食</a>
           <a href="http://localhost/jz/whaleinfo.php?cat=junshi"  cat="junshi" class="navItem ">军事</a>                                                                                                   
      </div>
      <p class="tip js-videolist-tip">为您推荐了2条资讯</p>
 </div>



相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)