Question

我是编码的新手，我想知道如何编码一个链接，该链接可以在使用HTML隐藏自身的同时显示隐藏的图像。从我收集到的信息来看，这应该可行：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("swagger-ui.html")
            .addResourceLocations("classpath:/META-INF/resources/");

    registry.addResourceHandler("/webjars/**")
            .addResourceLocations("classpath:/META-INF/resources/webjars/");
}

隐藏链接有效，通知有效，但是由于某些原因，当我尝试向一个函数中添加多个参数时，它似乎不起作用。我在做什么错了？

Answer 1

首先，您的myFunction定义中缺少结束括号。不过，在此处粘贴代码时可能只是一个错误。

您正在使用style.visibility尝试使图像可见，但这并不是使图像最初不可见的原因。如果要使用“可见性”属性使其可见，则需要使用相同的属性使其不可见。

function myFunction() {
  alert("The app is in the form of a webpage. Don't forget to add the webpage to your homescreen!");
}

function onoff() {
  if (document.getElementById) {
    document.getElementById("QRText").style.visibility = "hidden";
    document.getElementById("revealonclick").style.visibility = "visible";
  }
}

<a href="javascript:onoff()" id="QRText" onclick="myFunction();"=>Click to reveal QR code</a>
<img style="visibility: hidden;" alt="QR Code" id="revealonclick" src="https://erallie.weebly.com/uploads/1/1/8/6/118611729/published/qr-code-erallie-s-app.png?1532624405">

这有效，但是您会注意到图像显示在您的链接仍然可见的位置。这是因为使用可见性：隐藏会使项目不可见，但仍会在DOM中占用空间。要使其“完全消失”，可以使用“ display：none;”。和“ display：inline;”或“显示：块；”代替。

Answer 2

您的代码中有几个语法错误。以下应该起作用。

function myFunction() {
  alert("The app is in the form of a webpage. Don't forget to add the webpage to your homescreen!");
}

function onoff() {
  var elem1 = document.getElementById("QRText");
  var imgElem = document.getElementById("revealonclick");
  if (elem1 && imgElem) {
    elem1.style.visibility = "hidden";
    imgElem.style.visibility = "visible";
  }
}

<a href="javascript:onoff()" id="QRText" onclick="myFunction()">Click to reveal QR code</a>
<img style="visibility: hidden;" alt="QR Code" id="revealonclick" src="https://erallie.weebly.com/uploads/1/1/8/6/118611729/published/qr-code-erallie-s-app.png?1532624405">

链接显示图像并隐藏自身

2 个答案: