Взаимодействие кнопок, перенимание стилей.
Всем привет.
В следствии моих, довольно, скудных познаний у меня возникли трудности. Имеется несколько кнопок, необходимо, что бы при нажатии на кнопку 1, у случайной кнопки, кроме первой менялся стиль, допустим, изменилась кнопка 3, нужно, что бы при нажатии на неё, так же изменялся стиль случайной кнопки, при этом, что бы кнопка 3, возвращала первоначальный стиль, можно и без рандома, можно по заданному правилу. Хотя, можно обойтись задачей по проще: есть две кнопки, при нажатии на одну кнопку, меняется стиль другой и наоборот. |
Цитата:
|
function nextBtn(btn) { var n = btn.id; if(btn.id=="b1") n = "b2"; else n = "b1"; return document.getElementById(n); } function btnclick() { activebtn.style.backgroundColor = disactiveclr; activebtn.style.fontFamily = disactivefont; activebtn.style.fontSize = disactivesize; activebtn.onclick = null; activebtn = nextBtn(activebtn); activebtn.style.backgroundColor = activeclr; activebtn.onclick = btnclick; } var disactivesize = "20px"; var disactivefont = "Georgia"; var disactiveclr = "white"; var activeclr = "red"; var activebtn = null; function ld(){ (activebtn = document.getElementById("b1")).onclick=btnclick; } Только сильно не бейте |
<input type="button" value="Первая"> <input type="button" value="Вторая"> <input type="button" value="Третья"> <script> var btns = document.querySelectorAll('input[type=button]'); for(var i = 0; i < btns.length; i++) { btns[i].onclick = function(){ for(var j = 0; j < btns.length; j++) { btns[j]==this? btns[j].style.color = 'red': btns[j].style.color = 'green'; } } } </script> |
Ivan858,
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .act{ background-color: rgba(255, 0, 255, 1); transition: 1s; } button{ height: 100px; width: 100px; border-radius: 50%; } button:focus { outline: 0; border: 0; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener("DOMContentLoaded", function() { var nav = document.querySelector("nav"), button = nav.querySelectorAll("button"); nav.addEventListener("click", function(event) { var target = event.target; if ((target = target.closest("button")) && target.classList.contains("act")) { target.classList.remove("act"); target.style.backgroundColor = ""; var siblings = [].filter.call(button, function(child) { return child !== target }); target = siblings[siblings.length * Math.random() | 0]; target.classList.add("act"); target.style.backgroundColor = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6) } }) }); </script> </head> <body> <nav> <button class="act">01</button> <button>02</button> <button>03</button> <button>04</button> <button>05</button> <button>06</button> <button>07</button> <button>08</button> <button>09</button> <button>10</button></nav> </body> </html> |
Часовой пояс GMT +3, время: 21:02. |