JS实现点击链接取消跳转效果的方法 return false;不好使

evanth_2023 2016-09-14 02:13:53

这是html页面



<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="content-type"  content="text/html; charset=utf-8" >

    <title>Image gallery</title>

    <script type="text'javascript" src="js/showPic.js"></script>

    <link rel="stylesheet" href="css/layout.css" type="text/css" />

</head>

<body>

    <h1>Snapshots</h1>

    <ul>

        <li>

            <a href="images/fireworks.jpg" title="A fireworks display" onclick="showpic(this); return false;">Fireworks</a>

        </li>

        <li>

            <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a>

        </li>

        <li>

            <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>

        </li>

        <li>

            <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>

        </li>

        <a href="www.baidu.com"  onclick="alert(1); return false;"> ssss</a>

    </ul>

    <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />

    <p id="description">Choose an image.</p>

</body>

</html>

这是js code



/**

 * Created by AVICINFO on 2016/9/14.

 */

function showPic(whichpic) {

    var source = whichpic.getAttribute("href");

    var placeholder = document.getElementById("placeholder");

    placeholder.setAttribute("src",source);

    var text = whichpic.getAttribute("title");

    var description = document.getElementById("description");

    description.firstChild.nodeValue = text;

}

...全文

367 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

evanth_2023 2016-09-14

打赏
举报

evanth_2023 2016-09-14

打赏
举报

evanth_2023 2016-09-14

打赏
举报

大叔爱洗澡 2016-09-14

打赏
举报

引用 5 楼 yanghuangsanguo 的回复:

@i_oooo

把脚本放到p标签下面

evanth_2023 2016-09-14

打赏
举报

引用 7 楼 showbo 的回复:

[quote=引用 6 楼 yanghuangsanguo 的回复:] 函数名改好了，同样不好使！

你肯定没改，就是第一个图片函数名字写错了，后面3个没有问题，谷歌，firefox，ie都测试过了[/quote] 你有qq吗？我加一下你，我给你文件，你看看，我的qq，1633535464@@qq.com

Go 旅城通票 2016-09-14

打赏
举报

引用 6 楼 yanghuangsanguo 的回复:

函数名改好了，同样不好使！

你肯定没改，就是第一个图片函数名字写错了，后面3个没有问题，谷歌，firefox，ie都测试过了

evanth_2023 2016-09-14

打赏
举报

函数名改好了，同样不好使！

evanth_2023 2016-09-14

打赏
举报

@i_oooo

Go 旅城通票 2016-09-14

打赏
举报

<a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a> 第一张图函数名搞错了，注意大小写

evanth_2023 2016-09-14

打赏
举报

不好使，改完了，还是这样。我使用书上的例子，直接把html复制过去，就可以，但是我自己写的就不行！

大叔爱洗澡 2016-09-14

打赏
举报

<li>
        <a href="javascript:;" data-href="images/fireworks.jpg" title="A fireworks display" onclick="showpic(this);">Fireworks</a>
    </li>
    <li>
        <a href="javascript:;" data-href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);">Coffee</a>
    </li>
    <li>
        <a href="javascript:;" data-href="images/rose.jpg" title="A red, red rose" onclick="showPic(this);">Rose</a>
    </li>
    <li>
        <a href="javascript:;" data-href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);">Big Ben</a>
    </li>

改成这样试试， whichpic.getAttribute(“data-href”);

evanth_2023 2016-09-14