js 点击在同一页切换不同的内容

最新推荐文章于 2022-03-13 13:49:09 发布

a1720417545

最新推荐文章于 2022-03-13 13:49:09 发布

阅读量3.2k

点赞数

 
  <!doctype html> 
 
  <!--只做一个模板，样式就不做了--> 
 
  < 
  html  
  lang 
  = 
  'zh-cn' 
  > 
 
  < 
  head 
  > 
 
  < 
  meta  
  http-equiv 
  = 
  "Content-Type"  
  content 
  = 
  "text/html; charset=UTF-8" 
  > 
 
  < 
  style 
  > 
 
  *{margin: 0;padding: 0;} 
 
  #container{ 
 
  height: 180px; 
 
  width: 240px; 
 
  margin: 200px auto; 
 
  } 
 
  #btn{ 
 
  float: left; 
 
  width: 60px; 
 
  height: 180px; 
 
  } 
 
  #tab{ 
 
  float: right; 
 
  width: 178px; 
 
  height: 178px; 
 
  margin-left: -180px; 
 
  border: 1px solid black; 
 
  position: relative; 
 
  } 
 
  .tab_btn{ 
 
  display: block; 
 
  width: 58px; 
 
  height: 58px; 
 
  background: green; 
 
  line-height: 60px; 
 
  text-align: center; 
 
  border: 1px solid red; 
 
  text-decoration: none; 
 
  color: black; 
 
  } 
 
  .tab_btn:hover{ 
 
  background: blue; 
 
  color: white; 
 
  } 
 
  .tab_div{ 
 
  position: absolute; 
 
  left: 0px; 
 
  top: 0px; 
 
  display: none; 
 
  } 
 
  .curr_btn{ 
 
  background: blue !important; 
 
  color: white; 
 
  } 
 
  .curr_div{ 
 
  display: block !important; 
 
  } 
 
  </ 
  style 
  > 
 
  < 
  script 
  > 
 
  function getClass(className) { //className指class的值 
 
  var tagname = document.getElementsByTagName('*');  //获取指定元素 
 
  var tagnameAll = [];     //这个数组用于存储所有符合条件的元素 
 
  for (var i = 0; i < tagname.length; i++) {     //遍历获得的元素 
 
  if (tagname[i].className.indexOf(className)>=0){     //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll 
 
  tagnameAll[tagnameAll.length] = tagname[i]; 
 
  } 
 
  } 
 
  return tagnameAll; 
 
  } 
 
  window.onload=function(){//载入事件 
 
  var btn=getClass('tab_btn');//获取按钮数组 
 
  var div=getClass('tab_div');//获取div数组 
 
  for(i=0;i< 
  btn.length 
  ;i++){ 
 
  btn[i] 
  .onclick 
  = 
  function 
  (){//按钮点击事件 
 
  var index=(this.getAttribute('index')-0);//获取是第几个按钮按下 
 
  if(btn[index].className.indexOf('curr_btn')>=0) return;//如果按下的按钮为当前选中的按钮则无反应 
 
  for(i=0;i< 
  btn.length 
  ;i++){ 
 
  if(index==i){ 
 
  btn[i] 
  .className 
  = 
  'tab_btn curr_btn' 
  ; 
 
  div[i] 
  .className 
  = 
  'tab_div curr_div' 
  ; 
 
  }else{ 
 
  btn[i] 
  .className 
  = 
  'tab_btn' 
  ; 
 
  div[i] 
  .className 
  = 
  'tab_div' 
  ; 
 
  } 
 
  } 
 
  } 
 
  } 
 
  }; 
 
  </script> 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div  
  id 
  = 
  "container" 
  > 
 
  < 
  div  
  id 
  = 
  'btn' 
  > 
 
  < 
  a  
  href 
  = 
  'javascript:void(0)'  
  index 
  = 
  '0'  
  class 
  = 
  'tab_btn curr_btn' 
  >1</ 
  a 
  > 
 
  < 
  a  
  href 
  = 
  'javascript:void(0)'  
  index 
  = 
  '1'  
  class 
  = 
  'tab_btn' 
  >2</ 
  a 
  > 
 
  < 
  a  
  href 
  = 
  'javascript:void(0)'  
  index 
  = 
  '2'  
  class 
  = 
  'tab_btn' 
  >3</ 
  a 
  > 
 
  </ 
  div 
  > 
 
  < 
  div  
  id 
  = 
  'tab' 
  > 
 
  < 
  div  
  class 
  = 
  'tab_div curr_div' 
  > 
 
  div1 
 
  </ 
  div 
  > 
 
  < 
  div  
  class 
  = 
  'tab_div' 
  > 
 
  div2 
 
  </ 
  div 
  > 
 
  < 
  div  
  class 
  = 
  'tab_div' 
  > 
 
  div3 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >