Question

美好的一天，

我是一个菜鸟所以请原谅我一个愚蠢的问题，但我需要一些帮助我的网站。我有一个透明背景的“入门”按钮。当用户点击按钮时，背景应该消失。我应该插入什么代码？

非常感谢，亚历

网站代码：

</div>
<div id="artmaps-map-themap"><iframe src="https://mapsengine.google.com/map/embed?mid=zA9OSQj3vWR8.kZugAXwQLfOs" width="100%"  style="height:100%;"></iframe>   </div>
<div id="welcome">
  <div class="inner">
    <h2>Putting vinyl shops collection on the map.</h2>
    <p>Long Play holds over 1,000 vinyl shops around the world.</p>
    <ul>
      <li><a href="#" id="explore-map" class="primary">Get started</a></li>
    </ul>
  </div>
</div>
</body>
</html>

Answer 1

由于您已经包含了jQuery，只需执行一个简单的jQuery click()函数：

$(function(){
   $(".primary").click(function(){ //Click function
      $("#welcome").hide(); //Hides ID welcome.
      //you could fade it out like $("#welcome").fadeOut();
   });
});

Answer 2

如果你想隐藏你的背景，你可以使用它

$("#explore-map").on("click", 
  function(){ 
      $("#welcome").hide();
  });

或者如果你想删除它

$("#explore-map").on("click", 
  function(){ 
      $("#welcome").remove();
  });

Answer 3

首先将按钮更改为实际按钮。

<button href="#" onclick="myFunction()" id="explore-map" class="primary">Get started</button>

然后添加一些像这样的javascript：

<script>
function myFunction(){
document.getElementById('welcome').style.background = "rgba(0, 0, 0, 0)";
}
</script>

在最后一个/ div之后添加js。这不会删除div #welcome，只是将背景设置为％100透明。这就是我想你想要的。

按钮不起作用。我应该使用什么代码？

3 个答案: