使用JavaScript的HTML页面混合、JavaScript 文件引用和HTML代码嵌入3种方式在HTML页面上打印出“点击我进入到百度首页”的超链接 前2种方式点击超链接后进入到百度首页,最后一种方式点击 超链接后打印出字符串:“跳转成功“
时间: 2024-09-10 14:26:58 浏览: 25
使用JavaScript的HTML页面混合、JavaScript文件引用和HTML代码嵌入三种方式在HTML页面上实现特定功能,各有特点。以下是三种方式实现打印“点击我进入到百度首页”的超链接,以及点击超链接后进入百度首页或打印“跳转成功”的方法。
1. HTML页面混合JavaScript代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接示例</title>
</head>
<body>
<a href="javascript:void(0);" onclick="toBaidu();">点击我进入到百度首页</a>
<script>
function toBaidu() {
window.location.href = 'https://www.baidu.com';
}
</script>
</body>
</html>
```
在上述代码中,`onclick`事件直接在HTML元素中通过内联JavaScript调用了`toBaidu`函数,该函数将浏览器的当前位置改变到了百度的首页。
2. JavaScript文件引用:
首先创建一个名为`script.js`的JavaScript文件,内容如下:
```javascript
// script.js 文件内容
function toBaidu() {
window.location.href = 'https://www.baidu.com';
}
```
然后在HTML文件中引用该JavaScript文件:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接示例</title>
<script src="script.js"></script>
</head>
<body>
<a href="javascript:void(0);" onclick="toBaidu();">点击我进入到百度首页</a>
</body>
</html>
```
在这种方式中,JavaScript代码被放在了外部文件中,HTML页面通过`<script>`标签引入了这个文件。点击超链接时,同样会调用`toBaidu`函数并跳转到百度首页。
3. HTML代码嵌入JavaScript代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接示例</title>
</head>
<body>
<a href="javascript:void(0);" onclick="alert('跳转成功');">点击我进入到百度首页</a>
</body>
</html>
```
在第三种方式中,我们没有使用函数而是直接在`onclick`事件中使用了`alert`方法来显示“跳转成功”,所以点击该超链接后不会跳转到百度,而是弹出一个包含“跳转成功”文本的警告框。