Question

我在页面上有很多图片，一个在另一个下面。当我点击其中一个时，将缩放它们，并且还会在页面的开头刷新/跳转。我怎么能阻止它？这是代码：

 <a href="#" style="text-decoration: none"><img src="house.jpg" id="house1" width="200" height="150" onclick="function1()">

CSS：

  .mystyle{
    position: fixed;
    left: 45%;
    top: 40%;
    transform:scale(5);
}
.mystyle2{
    float: right;
    transform: scale(1);
}

JS：

function function1(){
    var house = document.getElementById("house1");
    if(house.className == "mystyle")
        house.className = "mystyle2";
    else
        house.className = "mystyle";

}

Answer 1

这是一个语义的，可访问的解决方案（与已发布的解决方案不同）：

<button onclick="function1()">
    <img src="house.jpg" id="house1" width="200" height="150" alt="house">
<button>

注意：

此处未涉及任何链接，因此请勿使用<a>代码。使用真实<button>。这避免了所有href恶作剧。
将onclick从<img>移至<button>。这为您提供免费的键盘可访问性。
提供<img>替代文字。我刚刚选择了＃34; house＆＃34;因为它是由文件名暗示的。
您最好摆脱onclick属性并从外部js文件中挂接JavaScript。

Answer 2

删除href="#"

 <a style="text-decoration: none"><img src="house.jpg" id="house1" width="200" height="150" onclick="function1()">

Answer 3

＆＃13;

function function1(event){
    var house = document.getElementById("house1");
    if(house.className == "mystyle")
        house.className = "mystyle2";
    else
        house.className = "mystyle";

//return false;
//or

  event.preventDefault();
}

＆＃13;

<a href="#" style="text-decoration: none"><img src="house.jpg" id="house1" width="200" height="150" onclick="function1()"/>
  </a>

＆＃13;

Answer 4

这种情况正在发生，因为每次单击href="#"锚点内的图像时都会刷新页面。

只需删除#或使用jquery：

$('img').click(function(e) {
   e.preventDefault();
});

Answer 5

使用css position属性修复它的位置。例如位置：固定

Answer 6

您可以移除<a>元素，仅保留<img>或将其包含在<div>或<li>等其他元素中。由于您的javascript只会更改样式，因此链接没有用途。

Answer 7

使用javascript：void（0）;而不是锚标记中的＃，

例如：

<a href="javascript:void(0)"></a>

这会对你有帮助，继续编码：）

单击图像时页面跳转到顶部

7 个答案: