jquery实现点击进行跳转后,改点击的元素添加选中的效果

<script type="text/javascript" src="http://www.cnblogs.com/jq.js"></script>
.active {
    color: red;
}
//html代码
<ul id="tab2">
<li><a href="http://www.cnblogs.com/index.html">首页</a></li>
<li><a href="http://www.cnblogs.com/news.html">新闻</a></li>
<li><a href="http://www.cnblogs.com/about.html">关于</a></li>
<li><a href="http://www.cnblogs.com/job.html">工作</a></li>
<li><a href="http://www.cnblogs.com/ad.html">广告</a></li>
<li><a href="http://www.cnblogs.com/contactus.html">联系我们</a></li>
</ul>

//jq代码
$(function(){  window.onload=function(){
    var $tDiv = $("#tab2"),
           $links = $tDiv.find("a"),
          index = 0,//默认第一个菜单项
          url = location.href.split(‘?‘)[0].split(‘/‘).pop().toLocaleLowerCase();//取当前URL最后一个 / 后面的文件名全部转化为小写的
      if(url){//如果有取到, 则进行匹配, 否则默认为首页(即index的值所指向的那个)
          for (var i=$links.length; i--;) {//遍历 menu 的中连接地址
              if($links[i].href.toLocaleLowerCase().indexOf(url) !== -1){
                  index = i;
                  break;
              }
          }
      }
      //links[index].className = ‘active‘;
      $menu.find("a:eq(" + index + ")").addClass("active");  }})

点击的事件是超链接a的链接地址触发,主要需要实现的步骤是:

  1.在页面正在加载的时候同时执行js脚本,主要利用的是window.onload()

  2.获取到页面的链接的地址,该地址是除去带有的参数以后的最后一个数值并获取该值

  3.跟其点击的超链接的链接地址做相应的比较,通过indexOf获取位置的判断来参看是否是该超链接的链接地址

  4.找到该链接所属的超链的位置,加上相应的class类名

时间: 2024-08-28 08:41:34

jquery实现点击进行跳转后,改点击的元素添加选中的效果的相关文章

导航跳转后保持选中状态 jquery高亮当前选中菜单

功能需求:今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式.简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片) 解决方法:通过查看实例,我们需要用到JS中的jquery来实现这种效果,也可以通过CSS设置不同页面的a:hover实现效果,不过这显然是比较笨拙的方法.那么,如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

需求:比如有一个二级或三四级的菜单栏,页面不跳转时实现高亮显示是很容易的,网上有很多这样的素材.但是页面一跳转,新页面可就记不住你在上一个页面点击的位置了,也就不可能高亮显示.并且很多时候,跳转后的页面菜单栏是后台动态生成的,也就是菜单栏栏目不固定,那么就不可能给菜单栏高亮效果写死.不知道这个事利用前后台交互去做会不会容易点,但是现在是要用纯前台实现. 实现原理一:这时候必须找个地方给它把点击的位置存起来,等页面跳转后,从那个地方把标记取出来,再给导航相应的位置做高亮处理就好了. 方法1:利用

web导航栏点击跳转后的样式

搭建web网页的导航栏时,需要有点击某导航页面跳转后,被点击的<a>标签样式添加或改变(bootstrap只能实现页面不刷新的点击效果),网上查阅了很多,终于解决了问题,豁然开朗的同时也小总结一下: ps:以下为摘录百度知道,并非本人原创,而我用的便是其中第二种方法. 方法有很多,大体可分为三种: 一.在服务器端判断当前页面隶属于哪一个分类,然后对其进行高亮化,这个高亮化的方法也有很多,相信不是你要的,不一一讲解: 二.每一个页面这个导航条都在各自的页面内,那么独立对其分配class或者行内样

Jquery给当前页或者跳转后页面的导航栏添加选中后样式

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript" src="templets/js/jquery.js"></script>  <script type=&qu

jquery datables ajax分页后的点击事件无效是怎么回事

异步请求数据后,动态向table中追加行,行点击事件失效 动态加入到DOM中的对象无法继承原有的事件,所以无效,举例: // $.ajax... ajax部分省略 var tr = ""; if(data.length){     for(var i=0; i<data.length; i++){         tr = '<tr>';         tr += '<td>' + data.status == 0 ? "正常" : 

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

webstorm里面编辑页面后,点击右上角chrome图标可以直接跳到浏览器显示,需要安装这个插件

www.cnplugins.com_hmhgeddbohgjknpmjagkdomcpobmllji_2_0_7_  下载地址如果需要在webstorm里面编辑页面后,点击右上角chrome图标可以直接跳到浏览器显示,需要安装这个插件 安装方法:http://www.cnplugins.com/tools/how-to-setup-crx.html

自己开发的网页在跳转至微信公众号文章后,点击微信的返回,无法返回原网页

iOS 11.4 wechat 6.5.3 自己开发的网页在跳转至微信公众号文章后,点击微信的返回,无法返回原网页 其实很简单,只需要在公众号文章 URL 后面加上 &scene=4#wechat_redirect 即可解决问题 原文地址:https://www.cnblogs.com/maowenqiang/p/9626768.html

点击联系人跳转时怎么把这联系人传递给下一个页面

============问题描述============ 用ContentResolver显示出来的联系人列表,点击某一联系人后跳转到发短信界面,要咋样把联系人的姓名传递到短信界面呢,求大神 ============解决方案1============ 你不是会传值的吗?就是intent.putExtra啊,你的问题是不是如何获取你点击的那个item上面是名字是什么啊?