来自 系统操作 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

jquery地址栏链接与a标签链接匹配之特效代码总结

如题所述,当出现如此的效果与利益,点击有些链接后,给跳转后的该链接地址加多样式,通过增多class为current来充实特殊体制。

复制代码 代码如下:

如图所示:点击HTML+css3跳转后,给其增多如图样式:

$.request = (function () {
var apiMap = {};
function request(queryStr) {
var api = {};
if (apiMap[queryStr]) {
return apiMap[queryStr];
}
api.queryString = (function () {
var urlParams = {};
var e,
d = function (s) { return decodeURIComponent(s.replace(/+/g, " ")); },
q = queryStr.substring(queryStr.indexOf('?') + 1),
r = /([^&=]+)=?([^&]*)/g;
while (e = r.exec(q))
urlParams[d(e[1])] = d(e[2]);

图片 1

return urlParams;
})();
api.getUrl = function () {
var url = queryStr.substring(0, queryStr.indexOf('?') + 1);
for (var p in api.queryString) {
url += p + '=' + api.queryString[p] + "&";
}
if (url.lastIndexOf('&') == url.length - 1) {
return url.substring(0, url.lastIndexOf('&'));
}
return url;
}
apiMap[queryStr] = api;
return api;
}
$.extend(request, request(window.location.href));
return request;
})();

js代码如下:

接下来简要介绍绍一下插件的用法。
  我们能够透过 $.request.queryString["key"] 就能够赢获得地址栏上面key参数。
  大好多状态下自身用这几个插件来读取一些配备消息。
  大家有时候会在 html 标签中参预一些另外的非HTML属性来作为标记新闻,譬喻大家有时会写<a id="demo" href="javascript:;" config="?title=hello&auto=true&">德姆o</a>
  那标准我们由此   
    var config = $.request($("#demo").attr("config")).queryString;
    var title = config.title;
  很有益于就能读取a下面的安顿新闻,并且大家无需给a 增加太多别的的非Html属性。

var currUrl = window.location.href;
   var currStyle = function (links){
     links.each(function(){
        var url = $(this).attr('href');
        if (currUrl.indexOf(url) != -1){
          $(this).addClass("current");
          return false;
        }
     });
}

你只怕感兴趣的篇章:

  • 依照jquery的地址栏RTS游戏代码
  • jquery通过a标签删除table中的一行的代码
  • javascript和jquery修改a标签的href属性
  • php将url地址转化为全体的a标签链接代码(php为url地址增添a标签)
  • javascript/jquery获取地址栏url参数的办法
  • 选拔JS或jQuery模拟鼠标点击a标签事件代码
  • 兑现网页页面跳转的两种艺术(meta标签、js达成、php达成)
  • jquery trigger伪造a标签的click事件代表window.open方法
  • jquery 为a标签绑定click事件示例代码
  • a标签的href与onclick事件的分别详解
  • jquery地址栏链接与a标签链接相称之特效代码总计

哪些调用呢?

一般来讲jquery调用代码:

$(function(){
  currStyle($("#sidebar .list a"));
})

那样就落到实处了如图所示的功效。

javascript和jquery修改a标签的href属性

javascript代码如下:

document.getElementById("myId").setAttribute("href","www.xxx.com"); 
document.getElementById("myId").href = "www.xxx.com"; 

jquery:代码如下:

$("#myId").attr("href","www.xxx.com"); 

以上内容正是本文的全部内容,希望大家爱怜得舍不得放手。

你或然感兴趣的篇章:

  • jQuery获取地址栏参数插件(模仿C#)
  • 依据jquery的地址栏SLG游戏代码
  • jquery通过a标签删除table中的一行的代码
  • javascript和jquery修改a标签的href属性
  • php将url地址转化为全部的a标签链接代码(php为url地址增加a标签)
  • javascript/jquery获取地址栏url参数的点子
  • 运用JS或jQuery模拟鼠标点击a标签事件代码
  • 达成网页页面跳转的两种方式(meta标签、js实现、php实现)
  • jquery trigger伪造a标签的click事件代表window.open方法
  • jquery 为a标签绑定click事件示例代码
  • a标签的href与onclick事件的界别详解

本文由六合联盟网发布于系统操作,转载请注明出处:jquery地址栏链接与a标签链接匹配之特效代码总结

关键词: