Скрипт работает не полностью
Скрипт должен работать примерно так:
При нажатии на конкретный блок, он меняет свой стиль на противоположной и при повторном нажатии возвращаться. <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .non_used{ background-color:red; text-align: center; width: 300px; font-size:100px; } .used{ background-color: yellow; text-align: center; width: 300px; font-size:100px; color: red; } </style> <script type="text/javascript"> var i = 0; var block = document.getElementsByTagName("div"); function test(i){ if(block[i].getElementsByClassName("non_used")){ block[i].classList.remove("non_used"); block[i].classList.add("used"); }else{ block[i].classList.remove("used"); block[i].classList.add("non_used"); }; } </script> </head> <body> <div class="non_used" onclick="test(0)">000</div> <div class="non_used" onclick="test(1)">111</div> <div class="non_used" onclick="test(2)">222</div> <div class="used" onclick="test(3)">333</div> </body> </html> |
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .non_used{ background-color:red; text-align: center; width: 300px; font-size:100px; } .used{ background-color: yellow; text-align: center; width: 300px; font-size:100px; color: red; } </style> <script type="text/javascript"> var i = 0; var block = document.getElementsByTagName("div"); function test(i){ if(block[i].classList.contains("non_used")){ block[i].classList.remove("non_used"); block[i].classList.add("used"); }else{ block[i].classList.remove("used"); block[i].classList.add("non_used"); }; } </script> </head> <div class="non_used" onclick="test(0)">000</div> <div class="non_used" onclick="test(1)">111</div> <div class="non_used" onclick="test(2)">222</div> <div class="used" onclick="test(3)">333</div> |
А можно немного упростить
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .non_used{ background-color:red; text-align: center; width: 300px; font-size:100px; } .used{ background-color: yellow; text-align: center; width: 300px; font-size:100px; color: red; } </style> <script type="text/javascript"> function test(elem){ if(elem.classList.contains("non_used")){ elem.classList.remove("non_used"); elem.classList.add("used"); }else{ elem.classList.remove("used"); elem.classList.add("non_used"); }; } </script> </head> <div class="non_used" onclick="test(this)">000</div> <div class="non_used" onclick="test(this)">111</div> <div class="non_used" onclick="test(this)">222</div> <div class="used" onclick="test(this)">333</div> |
Спасибо огромное)))
|
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .non_used{ background-color:red; text-align: center; width: 300px; font-size:100px; } .used{ background-color: yellow; color: red; } </style> <script> function test(elem){ elem.classList.toggle("used"); } </script> </head> <body> <div class="non_used" onclick="test(this)">000</div> <div class="non_used" onclick="test(this)">111</div> <div class="non_used" onclick="test(this)">222</div> <div class="non_used used" onclick="test(this)">333</div> </body> </html> |
рони,
Я не стал сразу так далеко шагать:) Работу по складАм тоже полезно знать |
Часовой пояс GMT +3, время: 10:13. |