≪!DOCTYPE html≫
≪html lang="en"≫
≪head≫
≪meta charset="UTF-8"≫
≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
≪title≫Document≪/title≫
≪style≫
.color-blue{
background-color: blue;
width: 100%;
height: 200px;
}
.color-red{
background-color: red;
width: 100%;
height: 200px;
}
.color-yellow{
background-color: yellow;
width: 100%;
height: 200px;
}
≪/style≫
≪/head≫
≪body≫
≪div href="" id="blue" style="background-color: blue;" onclick="blue()"≫blue≪/div≫
≪div href="" id="red" style="background-color: red;" onclick="red()"≫red≪/div≫
≪div href="" id="yellow" style="background-color: yellow;" onclick="yellow()"≫yellow≪/div≫
≪div class="color" id="color"≫صفحه شگفت انگیز پخش تصاویر رنگارنگ≪/div≫
≪script≫
const color = document.querySelector("#color")
function blue(){
color.classList.remove("color-yellow")
color.classList.remove("color-red")
color.classList.add("color-blue")
}
function red(){
color.classList.remove("color-yellow")
color.classList.remove("color-blue")
color.classList.add("color-red")
}
function yellow(){
color.classList.remove("color-blue")
color.classList.remove("color-red")
color.classList.add("color-yellow")
}
≪/script≫
≪/body≫
≪/html≫