解决思路:
按钮属于控件级的对象,优先级比较高,所以不能象图片或文本一样直接加链接,只能通过按钮的单击事件调用脚本的方式来实现。
具体代码实现如下:
1、若直接在本页跳转到新的页面,实例测试源代码如下:
2、页面展示如下:
3、执行实例,点击【打开窗口】,运行结果如下:
4、如果需要打开一个新的页面进行跳转,实例测试源代码如下:
5、此时页面展示如下:
6、执行代码,结果如下:(将百度也载入)
使用onclick时间和location
1、在按钮里面加一个onclick事件。location.href表示在当前页面打开URL页面。
2、
使用标签
1、把放在a标签里,直接把链接放到标签里。
扩展资料
HTML 标签提示和注释
1、如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性。
2、被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)。
3、请使用 CSS 来设置链接的样式。
Location 对象属性
1、hash,设置或返回从井号 (#) 开始的 URL(锚)。
2、host,设置或返回主机名和当前 URL 的端口号。
3、hostname,设置或返回当前 URL 的主机名。
4、href,设置或返回完整的 URL。
5、pathname,设置或返回当前 URL 的路径部分。
6、port,描设置或返回当前 URL 的端口号。
7、protocol,设置或返回当前 URL 的协议。
8、search,设置或返回从问号 (?) 开始的 URL(查询部分)。
Location 对象方法
1、assign(),加载新的文档。
2、reload(),重新加载当前文档。
3、replace(),用新的文档替换当前文档。
HTML 标签的定义和用法
可以使用input的click事件进行处理,这里假设点击转向的链接是百度,方法如下:
1、DOM0级事件处理:
1)html代码:
2)js代码:
function goToBaiDu(){
console.log('现在去百度啦!')
window.open('http://www.baidu.com')
}
效果如下:
2、DOM2级事件,绑定click事件,如下:
1)html代码:
2)js代码:
window.onload = function(){
document.getElementById('btn1').addEventListener('click',goToBaiDu)
}
function goToBaiDu(){
console.log('现在去百度啦!')
window.open('http://www.baidu.com')
}
效果如下:
3、上面的方式的打开一个新窗口,还有一个打开链接的方式,是在当前标签页下直接跳转到另一个页面,代码如下:
window.location.href="http://www.baidu.com"
需要使用A标签包覆住button标签才可以的,这样就是形成了一个超链接的状态。
首先创建一个A标签,然后在A标签里面嵌套button标签,并且给A标签加入一个连接,见下面的代码:
2.这样就实现了一个点击button按钮实现跳转的效果了,样式完全不会改变。
以上就是给button按钮添加超链接的方式了,你学会了吗?
同意《casskkc2》的回答,但是增加一点补充
1.如果让本页转向新的页面则用:
2.如果需要打开一个新的页面进行转向,则用: