html网页设计中用按钮改变链接及打开方式

2025-10-16 20:32:36

1、打开文本编辑器或者记事本软件，输入网页基本标签代码

<html>

<body>

</body>

</html>

html网页设计中用按钮改变链接及打开方式

2、点击<html>标签后，输入<head>头标签，并在标签中定义<script>代码

<head>

</script>

</head>

html网页设计中用按钮改变链接及打开方式

3、在<script></script>标签之间定义一个changelink()函数，用来执行改变链接的功能。

function changeLink()

{

document.getElementById('jingyan').innerHTML="访问百度经验"

document.getElementById('jingyan').href="http://jingyan.baidu.com"

document.getElementById('jingyan').target="_blank"

}

html网页设计中用按钮改变链接及打开方式

4、功能函数定义好以后，点击正文<body>标签后，添加一个文字链接，将id设置为函数中调用的参数名称。

<a id="jingyan" href="http://wenku.baidu.com">访问百度文库</a>

html网页设计中用按钮改变链接及打开方式

5、然后给网页上添加一个按钮，点击后可以改变链接及打开方式。

html网页设计中用按钮改变链接及打开方式

6、再添加一些说明性的文字来做个解释

点击上面这个链接，会默认在_self（自己）窗口打开网页；点击【改变链接】按钮后，文字链接改变，点击链接就会在_blank（新窗口）打开。

html网页设计中用按钮改变链接及打开方式

7、最后将代码内容保存为html格式，预览网页效果。

html网页设计中用按钮改变链接及打开方式

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。