Question

如何使用css在 PROBLEM 551 中单击按钮来显示/隐藏图像？

<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>

更新：

我编辑了代码，所以这是：

<head>
    <script>
        document.write("<h1>\"Benvenuto nel programma\"</h1>\n<h3>Qui imparerò ad usare JavaScript facendo i problemi di Eulero</h3>");

        function problem(){
            var img = document.getElementById('problemi');
            return img.style.display = img.style.display === 'block' ? 'none' : 'block';
        }

        function problem551(){
            problem();
            .............
        }


    </script>

</head> 

<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img id="problemi" src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>

<style>
    img {....

但我一直都是，当我打开程序时，显示的图像......我怎么能隐藏它？

更新：

我找到了解决方案：

<img id="problemi" src="PROBLEM551.png" style="display: none;">

Answer 1

仅使用复选框的html和css解决方案。

＆＃13;

input[type=checkbox]{
display:none;
}
input[type=checkbox]:checked + img{
display:none;
}

img{display:block;}
label{
display:inline-block;
  background: gray;
  border-radius: 5px;
  padding:10px;
  /* Style your button here */
}

＆＃13;

<body>
    <div>
        <label for="problem551">problem551</label> 
        <input type="checkbox" id="problem551">
      
        <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
        <p id="p551"></p>
    </div>
</body>

＆＃13;

Answer 2

使用隐藏的复选框也可以在没有Javascript的情况下实现：

＆＃13;

    label.show {
    /*   make it look like a button if needed */
      border: 2px solid blue;
      display: block;
      cursor: pointer;
    }
    input.show {
      /* we don't need to display the actual checkbox */
      display: none;
    }
    input.show + * {
      /* the element after the checkbox will be hidden when the checkbox is not checked */
      visibility: hidden;
    }
    input.show:checked + * {
      /* the element will be shown when the checkbox is checked */
      visibility: visible;  
    }
    img {
      /* just a placeholder for the image */
      border: 5px solid red;
      width: 300px;
      height: 300px;
    }

＆＃13;

    <div>
        <label for="problem551" class="show">
          problem 551<br>(click to show image)
        </label>
        <input type="checkbox" class="show" name="problem551" id="problem551">
        <img src="PROBLEM551.png">
        <p id="p551"></p>
    </div>

＆＃13;

Answer 3

为什么不使用JavaScript？为img标记提供ID。然后通过id删除它。

<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img id="problem551" src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>

JavaScript的：

function problem551() {
   var element = document.getElementById("problem551");
   element.parentNode.removeChild(element);
};

Answer 4

它不会带按钮，但可以使用复选框来处理。该复选框甚至可以像按钮一样（通过标签）进行样式设置。

<label class="btn" for="checkbox-example">test</label>
<input id="checkbox-example" type="checkbox" />
<img src="http://placehold.it/100x100" />

以下css：

label {
  background: rgba( 0, 0, 0, 0.1);
  border: 1px solid #999;
  border-radius: 4px;
  padding: 6px 12px;
}
input[type="checkbox"] {
  display: none;
  &:checked + img {
    display: none;
  }
}

http://codepen.io/amishstripclub/pen/qazzgr

Answer 5

如果您需要在没有JavaScript的情况下执行此操作，则可以使用附加到隐藏复选框的类似样式的<label>替换该按钮。然后根据是否选中该复选框为该元素设置样式。

.button {
  background: #eee;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid #333;
  }
#toggle-img:checked ~ img[src="PROBLEM551.png"] {
  display: none;
  }

    <div>
        <input type="checkbox" id="toggle-img" style="display:none">
        <label onclick="problem551()" class="button" for="toggle-img">PROBLEM 551</label>
        <img src="PROBLEM551.png">
        <p id="p551"></p>
    </div>

Answer 6

这有效：Pure CSS JSFiddle

您需要使用<a>但是您可以将其设计为外观并感觉就像一个按钮

 <div>
        <a id="aa" onclick="problem551()" href="#problen551" >PROBLEM 551</a>
        <img src="PROBLEM551.png" id="problen551">
        <p id="p551">rrrr</p>
    </div>




#problen551:target{
   display:inline;
}
#problen551 {
  display:none;
}

Answer 7

您可以使用<input type="checkbox">元素，css :checked，:not(:checked)，相邻的兄弟选择器+选择器，:before来切换{{1 } img属性

display

input {
  appearance: button;
  -webkit-appearance: button;
  -moz-appearance: button;
  width: 100px;
  height: 30px;
  display: block;
}
input:before {
  content: "Problem 551";
  position: relative;
  left: 12px;
  top: 8px;
}
input:checked + img {
  display: none;
}
input:not(:checked) + img {
  display: block;
}

Answer 8

你需要javascript ....

我在p标签中移动了img，以便我可以通过id #p551来定位它...另一种方法是，给img一个id

＆＃13;

function problem551(){
  image = document.getElementById("p551");
  image.style.display = 'block';
  }

＆＃13;

p#p551{
  display:none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        
        <p id="p551"><img src="PROBLEM551.png"></p>
    </div>
</body>

＆＃13;

我使用了jquery，因为它更容易......告诉我，如果那是不可能的话......

更新

我把它改成了纯粹的javascript ......

Answer 9

要使用JavaScript设置元素的可见性，我们可以访问图片的style.display属性。

对您的HTML文件进行少量修改......

<img src="PROBLEM551.png" id="PROBLEM551">

在我们的JavaScript中，我们可以声明以下函数...

function problem551(){
    if(document.getElementById("PROBLEM551").style.display === "none"){
        document.getElementById("PROBLEM551").style.display = "inline"
    }else{
        document.getElementById("PROBLEM551").style.display = "none";
    }
}

在该功能中，如果我们的显示设置为无，请将显示设置为内联（或img的可见版本）。

如果尚未设置显示或尚未显示，则将其设置为none，这将使元素不可见。

Answer 10

＆＃13;

var toggle  = document.getElementById("button");
var content = document.getElementById("image");

toggle.addEventListener("click", function(){
  content.style.display = (image.dataset.button ^= 1) ? "block" : "none";
}, false);

＆＃13;

#image{
  display:none;
}

＆＃13;

<button id="button">PROBLEM 551</button>
<div id="image"><img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
</div>

＆＃13;

Answer 11

你没有css的解决方案。 CSS代表级联样式表。它只是为你的页面提供样式。它不像show / hide这样的功能。

层叠样式表（CSS）是一种向Web文档添加样式（例如，字体，颜色，间距）的简单机制。

javascript hide/show element

尝试自己动手，这样你就可以学习它。

为此必须使用javascript或jquery。我会推荐jquery。我希望你能理解。

CSS - 单击按钮显示元素

12 个答案: