JavaScript - WebAPI - 阻止a标签默认跳转

最新推荐文章于 2024-06-29 14:37:38 发布

Henry_ww

最新推荐文章于 2024-06-29 14:37:38 发布

阅读量915

点赞数 1

分类专栏： JavaScript 文章标签： web javascript js

本文链接：https://blog.csdn.net/Henry_ID/article/details/119809254

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

阻止a标签默认跳转

1.1-阻止a标签跳转两种常用方式

默认情况下，点击a标签会跳转到一个新的网页，这叫做超链接
某些情况下，我们只希望拿到a标签的样式（鼠标放上去有小手，用户很直观的知道这可以点击），而不希望跳转到新的网页这个时候我们就可以阻止a标签的跳转
以下几种不需要死记硬背，实际开发习惯任何一种即可
- 原理了解即可：
  - 第一种：给a标签添加点击事件，在点击事件中return false（建议使用，用于任意跳转a标签）
  - 第二种：给a标签的href属性设置一个伪链接（一般不用，用于页内跳转的a标签）

<!DOCTYPE html>
<html lang="zh-CN">

<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>阻止a链接跳转</title>
</head>

<body>
    <!-- 方案1: a链接有效,但是不要跳转, onclick直接得到 return false -->
    <a href="http://www.itcast.cn" onclick="return false">去黑马</a>
    <!-- 上述方式不用: 没有意义 -->

    <a href="http://www.baidu.com" class="two">去百度</a>
    <script>
        // 实际应用: 链接有效, 也可以跳转: 但是必须要满足条件
        document.querySelector('.two').onclick = function () {
            // 条件判定
            if (false) {
                return true
            }

            // 不跳转
            return false
        }
    </script>
    <!-- 上述两种方式: a链接有效, 但是不一定要跳转(条件控制) -->


    <!-- 下面的方案: 只要a的效果,不要跳转 -->
    <!-- 图片: 不需要跳转: 修改a链接href属性 -->
    <!-- href="javascript:;" || "javascript:void(0);" -->
    <a href="javascript:;"><img src="images/112-smallskin-1.jpg" alt=""></a>
    <a href="javascript:void(0);"><img src="images/112-smallskin-1.jpg" alt=""></a>
</body>

</html>

1.2-案例：页面换肤

需求：点击上方小图，下方展示对应大图

思路：
- 1.将图片的路径放入a标签的href属性中，并且禁用a标签的默认跳转
- 2.给每一个a标签添加点击事件
- 3.点击时，取出本次点击的a标签的href属性的值，赋值给下方大图的src属性

<!DOCTYPE html>
<html lang="zh-CN">

<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>阻止a链接跳转 - 页面换肤</title>
    <style>
        .skin {
            width: 1200px;
            margin: 0 auto;
        }

        .skin ul {
            display: flex;
            list-style: none;
            justify-content: space-around;
        }

        .skin ul li {
            width: 100px;
            border-radius: 0% 15% 0% 15%;
            overflow: hidden;
        }

        .skin ul li img {
            width: 100px;
        }

        .skin .big-skin img {
            width: 1200px;
        }
    </style>
</head>

<body>
    <div class="skin">
        <div>
            <ul>
                <li><a href="images/112-bigskin-1.jpg"><img src="images/112-smallskin-1.jpg" alt=""></a></li>
                <li><a href="images/112-bigskin-2.jpg"><img src="images/112-smallskin-2.jpg" alt=""></a></li>
                <li><a href="images/112-bigskin-3.jpg"><img src="images/112-smallskin-3.jpg" alt=""></a></li>
                <li><a href="images/112-bigskin-4.jpg"><img src="images/112-smallskin-4.jpg" alt=""></a></li>
                <li><a href="images/112-bigskin-5.jpg"><img src="images/112-smallskin-5.jpg" alt=""></a></li>
                <li><a href="images/112-bigskin-6.jpg"><img src="images/112-smallskin-6.jpg" alt=""></a></li>
                <li><a href="images/112-bigskin-7.jpg"><img src="images/112-smallskin-7.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="big-skin">
            <img src="images/112-bigskin-1.jpg" alt="">
        </div>
    </div>

    <script>
        // 需求: 点击小图, 切换大图

        // 技术实现: 点击小图,找到对应的a做点击事件, 将a的href属性的值 ,赋值给大图的src属性; 同时阻止跳转: return false

        document.querySelectorAll('.skin a').forEach(function (a) {
            a.onclick = function () {
                // 修改大图的src属性
                document.querySelector('.skin .big-skin img').src = a.href
                // document.body.style.backgroundImage = `url(${a.href})`

                // 阻止跳转
                return false
            }
        })
    </script>

</body>

</html>

Henry_ww

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 阻止a标签默认跳转

阻止a标签默认跳转1.1-阻止a标签跳转两种常用方式默认情况下，点击a标签会跳转到一个新的网页，这叫做超链接某些情况下，我们只希望拿到a标签的样式（鼠标放上去有小手，用户很直观的知道这可以点击），而不希望跳转到新的网页这个时候我们就可以阻止a标签的跳转以下几种不需要死记硬背，实际开发习惯任何一种即可原理了解即可：第一种：给a标签添加点击事件，在点击事件中return false（建议使用，用于任意跳转a标签）第二种：给a标签的href属性设置一个伪链接（一般不用，用于页内跳转的a标签）
复制链接

扫一扫