4.选项卡.js 595 B

123456789101112131415161718
  1. var btn = document.querySelectorAll("#list li");
  2. var content = document.getElementsByClassName("active");
  3. // this => window
  4. for(var i=0; i<btn.length; i++) {
  5. // btn.length = 4
  6. // btn下的每一个下标都为对应的i
  7. btn[i].index = i;
  8. btn[i].onclick = function() {
  9. for(var j=0; j < content.length;j++){
  10. // className 改 class (类名)
  11. btn[j].className = '';
  12. content[j].className = 'active';
  13. }
  14. // this => btn[i]
  15. this.className = 'selected';
  16. content[this.index].className = "choose active";
  17. }
  18. }