Jquery给div或者p添加href自动加载链接内容插件
程序员文章站
2022-04-28 14:08:27
...
/** * 当class为page的div,p,或者其他的非a标签包含href属性时 * 通过该插件自动的ajax包含的内容 * 当需要改变div的href属性时,需要手动的trigger触发hrefChange自定义事件 * $("#test").attr("href", "bee1314.iteye.com"); * $("#test").trigger("hrefChange") */ (function($) { // load content and you should be care context function load(context) { var nodeName = context.nodeName; var href = $(context).attr("href") console.log("nodeName=>" + nodeName + "; href=>" + href); if (nodeName != "a" && nodeName != "A" && href != "") { $(context).load(href); } } $(".page").each(function() { //load content load(this); //auto reload content when href changed var self = this; $(self).bind("hrefChange", function() { load(self); }) }) })(jQuery);
或许将href属性改成url属性更好,这样可以避开判断是不是a标签。
使用方式:
1. 添加class的属性为page,插件会根据page属性进行过滤查找
<!--该div中就会自动加载href链接的内容,是不是有iframe的赶脚-->
<div id="test" class="page" href="bee1314.iteye.com">
当需要改变href的链接时候:
$("#test").attr("href", "www.github.com")
$("#test").trigger("hrefChange"); //通过jQuery的自定义事件实现让插件帮助我们重新reload div内容
上一篇: [CSS]如何使div不随窗口缩放而移位
下一篇: E-Text Editor开源啦!