1. L'exclusion de la pensée est plus courante dans le changement d'effet de la barre d'onglets, et lorsque vous cliquez sur le bouton, les étapes sont les suivantes:
1. Effacer tous les styles d'abord,
2. Définir le style de l'élément actuel,
3. L'ordre principal ne peut pas être inversé, car il est exécuté de haut en bas pour tuer tout le monde d'abord, puis ne laissez que le style défini par vous-même. Le
résumé est le suivant: supprimez d'abord tous les styles d'origine et définissez le style actuel
Coder directement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
// 1.获取元素
var btn = document.getElementsByTagName('button')
// 2.每一个按钮都要绑定事件
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
// 3.点击前先把每一个按钮设置为无色
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
// 4.在添加样式 为红色
this.style.backgroundColor = 'red';
}
}
</script>
</body>
</html>
