首页 前端知识 2023.11.18html中如何使用input/button进行网页跳转

2023.11.18html中如何使用input/button进行网页跳转

2024-05-11 23:05:20 前端知识 前端哥 168 18 我要收藏

2023.11.18html中如何使用input/button进行网页跳转

在做网页时有时会用<button>元素,有时会用<input>元素进行form表单操作或者网页跳转,但是用bootstrap时两种元素会出现不同的样式,为了样式一致,有时需要使用这两种元素相互实现其常用功能。

使用<button>元素进行网页跳转:

<!DOCTYPE html>
<html>
<head>
    <title>Button Redirect</title>
    <script>
        function redirectToPage() {
            window.location.href = "https://www.example.com";
        }
    </script>
</head>
<body>
    <button onclick="redirectToPage()">跳转到 Example 网站</button>
</body>
</html>

使用js调用redirectToPage()函数,该函数使用window.location.href实现网页跳转。

使用<input>实现网页跳转。可以使用<input>元素的type="button"属性创建一个按钮,并使用JavaScript的onclick事件来执行跳转操作:

<!DOCTYPE html>
<html>
<head>
    <title>Input Redirect</title>
    <script>
        function redirectToPage() {
            window.location.href = "https://www.example.com";
        }
    </script>
</head>
<body>
    <input type="button" value="跳转到 Example 网站" onclick="redirectToPage()">
</body>
</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8129.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!