使用a标签和button标签实现页面的跳转再跳回来

最新推荐文章于 2024-07-29 12:16:40 发布

原创最新推荐文章于 2024-07-29 12:16:40 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#页面跳转 #a标签跳转 #button跳转 #图片跳转 #修改a标签的颜色

Web前端专栏收录该内容

30 篇文章

订阅专栏

本文展示了如何使用HTML的a标签和button标签实现页面跳转，同时在目的页面通过button点击实现返回上一页的功能。涉及到的样式修改、JavaScript事件处理以及页面交互逻辑，有助于理解网页导航控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>页面的跳转</title>
    <!--修改a标签的样式-->
    <style type="text/css">

	/*顺序需要注意*/
        #testColor{
            text-decoration: none;
        }
        #testColor:link{
            color: #000;
        }
        #testColor:visited{
            color: green;
        }
        #testColor:hover{
            color: skyblue;
        }
        #testColor:active{
            color: brown;
        }
    </style>
    <script type="application/javascript">
        window.onload = function(){
            //使用button进行页面的跳转
            var button = document.getElementById("button");
            button.onclick = function(){
//                window.open("./跳转目的页面.html");   //target=_blank
//                window.location.href = "跳转目的页面.html"; //target=_self
//                self.location = "跳转目的页面.html";
//                window.navigate("跳转目的页面.html");  //只有IE支持
                top.location = "跳转目的页面.html";
            }
        }
    </script>
</head>
<body>
<a href="跳转目的页面.html" id="testColor">跳转到目的页面</a>
<button id="button">使用button跳转</button>
<br />
图片链接：
<a href="跳转目的页面.html"><img height="50" width="50" src="../images/2.jpg"
                           alt="图片显示不出来了..."></a>
</body>
</html>

目的页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>跳转目的页面</title>
    <script type="application/javascript">
        window.onload = function () {
            var button = document.getElementById("button");
            button.onclick = function(){
                //返回上一页
                window.history.back(-1);
            }
        }
    </script>
</head>
<body>
    跳转目的页面
    <button id="button">使用button跳转 返回上一页</button>
</body>
</html>