首页html5 下拉选择框ID 为s01 ,有10个option ,选中option id="01" 或option id="02" 或option id="03" 时表格id =ta1 ~tab7全部加亮并闪烁，弹出消息

html5 下拉选择框ID 为s01 ,有10个option ,选中option id="01" 或option id="02" 或option id="03" 时表格id =ta1 ~tab7全部加亮并闪烁，弹出消息

时间: 2023-11-28 21:04:44 浏览: 55

你可以使用以下代码来实现你的需求： ```html <!DOCTYPE html> <html> <head> <script> function selectOption() { var dropdown = document.getElementById("s01"); var selectedOption = dropdown.options[dropdown.selectedIndex].id; if (selectedOption === "01" || selectedOption === "02" || selectedOption === "03") { for (var i = 1; i <= 7; i++) { var table = document.getElementById("tab" + i); table.style.backgroundColor = "yellow"; table.style.animation = "blink 1s infinite"; } alert("选中了特定的选项！"); } } document.addEventListener("DOMContentLoaded", function(event) { var dropdown = document.getElementById("s01"); dropdown.addEventListener("change", selectOption); }); </script> <style> @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <select id="s01"> <option id="01">选项1</option> <option id="02">选项2</option> <option id="03">选项3</option> <option id="04">选项4</option> <option id="05">选项5</option> <option id="06">选项6</option> <option id="07">选项7</option> <option id="08">选项8</option> <option id="09">选项9</option> <option id="10">选项10</option> </select> <table id="tab1"> <tr><td>表格1</td></tr> </table> <table id="tab2"> <tr><td>表格2</td></tr> </table> <table id="tab3"> <tr><td>表格3</td></tr> </table> <table id="tab4"> <tr><td>表格4</td></tr> </table> <table id="tab5"> <tr><td>表格5</td></tr> </table> <table id="tab6"> <tr><td>表格6</td></tr> </table> <table id="tab7"> <tr><td>表格7</td></tr> </table> </body> </html> ``` 这段代码会在选择下拉框的特定选项时，将表格的背景色设置为黄色并闪烁，并弹出一个消息框。你可以根据需要自定义样式和消息内容。

阅读全文