js 탭 전환 effect_javascript 기술의 간단한 구현

이 글의 예시에서는 js 탭 전환 효과를 구현하기 위한 자세한 코드를 소개하고 있으며, 참고용으로 모두와 공유합니다

사물:

• 1. 요소 가져오기
• 2. for 루프 버튼 요소에 onclick(클릭) 또는 onmousemove(이동) 이벤트를 추가합니다.
3. 현재 버튼을 클릭하면 강조 표시된 상태로 표시됩니다. for 루프를 통해 모든 버튼 스타일을 비우고 모든 div 표시를 없음으로 설정합니다.
4. 현재 버튼을 클릭하여 스타일을 추가하고 현재 div를 표시하며 표시를 차단으로 설정합니다.
• 
  html 코드:

CSS 스타일:

 <div id="div1">
  <input type="button" class="active" value="1"/>
  <input type="button" value="2"/>
  <input type="button" value="3"/>
  <input type="button" value="4"/>
   <div class="div2" style="display:block;">11</div>
   <div class="div2">22</div>
   <div class="div2">33</div>
   <div class="div2">44</div>
 </div>
 

js 코드:

 .active
  {
  background:#9CC;
  }
 .div2
  {
  width:300px;
  height:200px;
  border:1px #666666 solid;
  display:none;
  }

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

<script>
window.onload=function(){
 
  var odiv=document.getElementById('div1');//获取div
  var btn=odiv.getElementsByTagName('input');//获取div下的input
  var div2=odiv.getElementsByTagName('div') ;//获取div下的div
 
 for(i=0;i<btn.length;i++)//循环每个按钮
  {
   btn[i].index=i //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i
   btn[i].onclick=function()//按钮的第i个点击事件
  {
  for(i=0;i<btn.length;i++)//循环去掉button的样式，把div隐藏
   {
    btn[i].className='' //清空按钮的样式
    div2[i].style.display='none'//隐藏div
   }
    this.className='active'//自身添加active
    div2[this.index].style.display='block'//this.index是当前div
 
 
  }
  }
 
}
</script>