一、原生JS直接改变a标签链接与图片src链接(JS一定要在欲改变的源码之后加载)
0 1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <img id="image" src="/i/tulip.jpg" /> <a id="test" href="http://www.baidu.com/" target="_blank">织梦先生</a> <script> document.getElementById("image").href="/myimg.jpg"; document.getElementById("test").href="http://mrdede.com/"; </script> </body> </html> |
原始图片是tulip.jpg,改变后的图片myimg.jpg。
a标签改变后的链接是http://mrdede.com/
二、引入jQuery方法改变a标签链接与图片src链接(应该是任意jQuery版本都可以,JS一定要在欲改变的源码之后加载)
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <img id="image" src="/i/tulip.jpg" /> <a id="test" href="http://www.baidu.com/" target="_blank">织梦先生</a> <script type="text/javascript"> var w = $(document).width(); if(w < 768){ $('.image').attr('src','/myimg.com'); $('.test').attr('href','http://mrdede.com'); $(".test").text('百度'); } </script> </body> </html> |
原始图片是tulip.jpg,改变后的图片myimg.jpg
a标签改变后的链接是http://mrdede.com/
原始文本是“织梦先生”,改变后文本是“百度”
其中加了判断,当前可使用屏幕宽度小于768时,改变图片链接、a标签链接和文本内容。