Rumah > hujung hadapan web > tutorial js > jquery地址栏链接与a标签链接匹配的特效

jquery地址栏链接与a标签链接匹配的特效

不言
Lepaskan: 2018-07-02 15:56:07
asal
1722 orang telah melayarinya

这篇文章主要介绍了关于jquery地址栏链接与a标签链接匹配的特效,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

jquery如何获取地址栏参数,改变地址栏样式,接下来,通过本篇文章给大家分享jquery地址栏链接与a标签链接匹配之特效代码总结,需要的朋友可以参考下

如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式。

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

js代码如下:

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;
        }
     });
}
Salin selepas log masuk

怎样调用呢?

如下jquery调用代码:

$(function(){
  currStyle($("#sidebar .list a"));
})
Salin selepas log masuk

这样就实现了如图所示的功能。

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

javascript代码如下:

document.getElementById("myId").setAttribute("href","www.xxx.com"); 
document.getElementById("myId").href = "www.xxx.com";
Salin selepas log masuk

jquery:代码如下:

$("#myId").attr("href","www.xxx.com");
Salin selepas log masuk

以上内容就是本文的全部内容,希望大家喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jquery ztree实现右键收藏功能

基于jQuery实现的查看全文的功能

基于Jquery easyui 选中特定的tab

Atas ialah kandungan terperinci jquery地址栏链接与a标签链接匹配的特效. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan