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

 时间:2024-10-15 10:45:38

1、打开文本编辑器或者记事本软件,输入网页基本标签代码<html><body></body></html>

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

2、点击<html>标签后,输入<head>头标签,并在标签中定义<script>代码<head><script type="text/javascript"></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、然后给网页上添加一个按钮,点击后可以改变链接及打开方式。<input type="button" onclick="changeLink()" value="改变链接">

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

6、再添加一些说明性的文字来做个解释<p>点击上面这个链接,会默认在_self(自己)窗口打开网页;点击【改变链接】按钮后,文字链接改变,点击链接就会在_blank(新窗口)打开。</p>

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

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

html网页设计中用按钮改变链接及打开方式
html网页设计中用按钮改变链接及打开方式
html网页设计中用按钮改变链接及打开方式
  • Animate轮播图怎么设置
  • photoshop按钮制作教程(步骤附图)
  • flash 制作引导层动画
  • Animate/FLASH如何实现水平拖动图片(AS3)
  • Axure RP8怎么设置形状和图片圆角
  • 热门搜索
    读书手抄报 文明礼仪伴我行手抄报 英语手抄报简单又漂亮 心理健康手抄报内容 法制教育手抄报 手抄报内容 祭英烈手抄报 遨游汉字王国手抄报 诚信手抄报 安全手抄报图片