Html超级链(A标签)实现按钮效果的五种方法（综合实例）

最新推荐文章于 2022-02-09 16:20:26 发布

敦厚的曹操

最新推荐文章于 2022-02-09 16:20:26 发布

阅读量4.7k

点赞数 2

分类专栏： 3.【javascript】 5.【css】 4.【html】文章标签： JavaScript HTML 实例 js css

本文链接：https://blog.csdn.net/dxnn520/article/details/9060059

版权

3.【javascript】同时被 3 个专栏收录

88 篇文章 1 订阅

订阅专栏

5.【css】

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    a {
      display: block;
      width: 150px;
      height: 50px;
      background-color: rgb(40, 122, 228);
      color: white;
      text-decoration: none;
      text-align: center;
      line-height: 50px;
      border-radius: 5px;
    }
    a:hover{background-color:rgb(199, 14, 14);}
  </style>

  <body>
    <div>
      <a href="javascript:alert('执行js语句');">执行js语句</a>
      <div style="height: 20px"></div>
      <a href="javascript:void(0);" onclick="box();">执行js函数_1</a>
      <div style="height: 20px"></div>
      <a href="#" onclick="box();return false;">执行js函数_2</a>
      <div style="height: 20px"></div>
      <a href="javascript:box();">执行js函数_3</a>
      <div style="height: 20px"></div>
      <a id="button_1">执行js函数_4</a>
    </div>
  </body>

  <script
    src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"
    type="text/javascript"
  ></script>
  <script type="text/javascript">

    $("#button_1").click(function(){
        box();
    })

    function box() {
      alert("执行js函数！");
    }
  </script>
</html>