CSS - Показать элемент, нажав кнопку

Как я могу показать/скрыть изображение, нажав кнопку, в моем случае PROBLEM 551, используя css?CSS - Показать элемент, нажав кнопку

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

UPDATE:

Я редактировал код, так что это:

<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 {....

Но я всегда, когда я открываю программу, изображение, показанное .. Как я могу скрыть это?

UPDATE:

Я нашел решение:

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

источник

2016-10-31 Teshtek

Вам необходимо Javascript для этого – Towkir

Что вы пробовали? Это самая простая задача для javascript ... –

Я не думаю, что в CSS есть опция show/hide. Перейдите по этой ссылке - http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css – yashpandey

<body> 
    <script> 
     function problem551() { 
      var img = document.getElementById('img551'); 
      img.style.display = img.style.display === 'block' ? 'none' : 'block'; 
     } 
    </script> 
    <div> 
     <button onclick="problem551()" >PROBLEM 551</button> 
     <img src="PROBLEM551.png" id="img551"> 
     <p id="p551"></p> 
    </div> 
</body>

источник

2016-10-31 15:14:30

Это «хорошее решение, но как получить изображение, скрытое ранее, а может быть, потом показать его? Как манипулировать этим кодом для этого? – Teshtek

Вы можете использовать этот код: document.getElementById ('img551'). Style.display = 'block'; И это, чтобы скрыть: document.getElementById ('img551'). Style.display = 'none'; –

Я хочу изображение, когда оно рождается, скрывается ... Во всяком случае, у меня есть решение ... это мой ответ! :) – Teshtek

вам нужно JavaScript для этого ....

я переехал IMG в р тега, так что я могу предназначаться его по идентификатору #p551 ... другой подход был бы, чтобы дать Img идентификатор

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

p#p551{ 
 
    display:none 
 
}

<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>

я использовал JQuery, потому что это способ проще ... скажите мне, если это не вариант ...

обновление

я изменил его на чистом JavaScript ...

источник

2016-10-31 15:11:48 FalcoB

Я хочу сделать это с Js ... Я сейчас ищу googling – Teshtek

Почему бы просто не использовать JavaScript? Дайте тегу img идентификатор. И затем удалите его по 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); 
};

источник

2016-10-31 15:14:04 user1289451

Чтобы установить видимость нашего элемента с помощью 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, что сделает элемент невидимым.

источник

2016-10-31 15:14:48 MineAndCraft12

Не собирается летать с помощью кнопки, но для ее использования может быть установлен флажок. Флажок можно даже стилизовать (с помощью ярлыка), как кнопка.

<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

источник

2016-10-31 15:15:34

Если вам необходимо сделать это без 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>

источник

2016-10-31 15:16:42 Blazemonger

Это работает: 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; 
}

источник

2016-10-31 15:19:03

только HTML и css-решение, используя флажок.

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 */ 
 
}

<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>

источник

2016-10-31 15:20:12

Это также может быть достигнуто без Javascript, используя скрытый флажок:

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; 
 
    }

<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>

источник

2016-10-31 15:20:48 Teneff

var toggle = document.getElementById("button"); 
 
var content = document.getElementById("image"); 
 

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

#image{ 
 
    display:none; 
 
}

<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>

источник

2016-10-31 15:34:15

Вы можете использовать <input type="checkbox"> элемент, css:checked, :not(:checked), смежный селектор родственного + селекторов, :before для переключения imgdisplay свойства

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; 
 
}

<body> 
 
    <div> 
 
    <input type="checkbox" /> 
 
    <img id="img" src="http://placehold.it/300x150?text=551"> 
 
    <p id="p551"></p> 
 
    </div> 
 
</body>

источник

2016-10-31 15:45:49 guest271314

не имеет решения в CSS для этого. CSS - это каскадные таблицы стилей. Он просто дает стиль вашей странице. Он не выполняет функцию, например show show/hide.

Каскадные таблицы стилей (CSS) - это простой механизм добавления стиля (например, шрифтов, цветов, интервалов) в веб-документы.

javascript hide/show element

Попробуйте сделать это самостоятельно, так что вы можете научиться.

Для этой цели вам необходимо использовать javascript или jquery. Я буду рекомендовать jquery. Надеюсь, вы поймете.

источник

2016-10-31 15:53:40

CSS - Показать элемент, нажав кнопку

ответ

Смежные вопросы