Tag Archives: 改变链接

七 07

使用JS改变a标签中的href链接与图片src链接方法

Posted on by

一、原生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标签链接和文本内容。