Изменение блоков при нажатии
Всем привет, у меня есть блоки. Я хочу при нажатии на него менять только его background-color, а при нажатии на другой блок, возвращать тот в исходное состояние, а на выбранный накидывать background-color.
Я использую JS, так что если можно через него, то подскажите, буду рад. Заранее спасибо |
Georgie0409,
ваши попытки где? Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<div id = 'main_container'>
<div id = 'container1>
<div id = 'container2>
<div id = 'container3>
<div id = 'container4>
</div>
#main_container{
positon: absolute;
height: 8vmax;
width: 8vmax;
}
#container1{
positon: absolute;
height: 2vmax;
width: 2vmax;
background-color : rgba(192,192,192, 0.5);
}
#container2{
positon: absolute;
height: 2vmax;
width: 2vmax;
left: 2vmax;
background-color : rgba(192,192,192, 0.5);
}
#container3{
positon: absolute;
height: 2vmax;
width: 2vmax;
left: 2vmax;
background-color : rgba(192,192,192, 0.5);
}
#container4{
positon: absolute;
height: 2vmax;
width: 2vmax;
left: 2vmax;
background-color : rgba(192,192,192, 0.5);
}
jQuery(document).ready(function() {
$("#container1").click(function() {
$("#container1").css({
'background-color' : 'rgba(192,192,192, 0.25)',
});
});
$("#container2").click(function() {
$("#container2").css({
'background-color' : 'rgba(192,192,192, 0.25)',
});
});
$("#container3").click(function() {
$("#container3").css({
'background-color' : 'rgba(192,192,192, 0.25)',
});
});
$("#container4").click(function() {
$("#container4").css({
'background-color' : 'rgba(192,192,192, 0.25)',
});
});
});
Я могу при нажатии на container1 делать изменения в container2, container3, container4, но у меня в основном коде очень много блоков и я просто изуродую код) Может можно как-то сделать по другому? |
Georgie0409,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main_container{
display: flex;
height: 8vmax;
width: 8vmax;
}
.main_container > .container{
height: 2vmax;
width: 2vmax;
border: 1px solid #0000CD;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var divs = $('.container');
$('.main_container').on('click', '.container', function() {
divs.css({'background-color' : ''});
$(this).css({'background-color' : 'rgba(192,192,192, 0.25)'});
})
});
</script>
</head>
<body>
<div class='main_container'>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
</div>
</body>
</html>
|
Если без привлечения лишних сущностей, то можно, например, так...
<!doctype html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main_container {
display: flex;
height: 8vmax;
width: 8vmax;
}
.main_container > .container {
height: 2vmax;
width: 2vmax;
border: 1px solid #0000CD;
box-sizing: border-box;
}
</style>
<script>
document.addEventListener("click", event => {
const container = event.target.closest(".main_container > .container");
if(container) {
const root = container.parentNode;
if(root._lastContainer)
root._lastContainer.style.backgroundColor = "";
container.style.backgroundColor = "rgba(192, 192, 192, 0.25)";
root._lastContainer = container;
}
});
</script>
</head>
<body>
<div class="main_container">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</body>
</html>
рони, можно ведь запомнить, какой был выбран? Проверьте, что будет, если добавить ещё один main_container |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 02:24. |