单击链接时无法将jQuery转换为.css（“ display”，“ block”）

Question

我试图让jQuery在单击href链接时显示CSS属性。

我已经测试了CSS属性，并且在将显示设置为“阻止”（在样式表上）时，它们按照您的想象工作，但是，当我将初始CSS显示设置为“无”并尝试让jQuery将其更改为阻止时单击链接后-没有任何反应。

我正在使用.css（“ display”，“ block”），看不到没有任何理由，所以任何建议都很好！

<style type="text/css">

   #contactOuter {
   position: fixed;
   height:100%;
   width: 100%;
   background: rgba(10, 10, 10, 0.5);
   z-index: 1010;
   display: none;
 }

</style>


<html>

<a href="" id="contactLink">Contact Us</a>

</html>


<script type="text/javascript">

$("#contactLink").click(function(){
    $("#contactOuter").css("display", "block");
});

</script>

Answer 1

您的代码有效！ 只是单击锚链接时页面正在刷新。 使用javascript:void(0); 在href属性上

<a href="javascript:void(0);" id="contactLink">Contact Us</a>

<div id="contactOuter">Hello</div>

另外，最佳做法是将Js包装到$(document).ready(function{ //code here });

$(document).ready(function() {
  $("#contactLink").click(function() {
    $("#contactOuter").css("display", "block");
  });
});

希望这可以帮助。

Answer 2

就像其他人说的那样。 首先，您应该先学习如何使用html,head,body构造html代码html,head,body并了解页面的工作流程。 它从上到下读取。 另外，您还需要首先包含jquery.js ...

<html>
<head>
<style type="text/css">

   #contactOuter {
   position: fixed;
   height:100%;
   width: 100%;
   background: rgba(10, 10, 10, 0.5);
   z-index: 1010;
   display: none;
 }

</style>
</head>
<body>
<a href="" id="contactLink">Contact Us</a>

<script>

$("#contactLink").click(function(){
    $("#contactOuter").css("display", "block");
});

</script>

</body>
</html>

Answer 3

正确的方法是使用show和hide：

$("#contactLink").click(function(){
    $("#contactOuter").show();
});

另一种方法是使用jQuery css方法：

$("#contactLink").click(function(){
$("#id").css("display", "block");
});