기본 js와 jQuery_javascript 기술 간의 간단한 탭 전환 효과 비교

탭 페이지는 일반적으로 공간이 제한적이고 콘텐츠가 많은 상황에 적합하며, 페이지의 아름다움을 고려하고 과도한 정보로 인해 사용자에게 시각적 피로를 주지 않습니다. 다양한 용도로 사용됩니다. 아래에서는 간단히 구현하기 위해 두 가지 방법을 사용합니다.

먼저 페이지 요소를 구축합니다. 우리는 일반적으로 ul 및 ol을 포함하여 탭의 클릭 가능한 부분을 전달하기 위해 목록을 사용합니다. 여기서는 탭을 수평으로 분산시키므로 왼쪽에 떠 있게 만들어야 합니다. 페이지의 콘텐츠는 div에서 호스팅될 수 있습니다. 또한 공통된 특성을 가진 요소들의 스타일과 동작을 균일하게 제어해야 하므로 다음과 같은 돔 구조를 갖습니다.

<div id="main">
      <ul id="tabbar" class="cl">
        <li class="t1">t1</li>
        <li class="def">t2</li>
        <li class="def">t3</li>
        <li class="def">t4</li>
        <li class="def">t5</li>
      </ul>
      <div id="content">
        <div class="cont t1">Hi !</div>
        <div class="cont t2">I Like You!</div>
        <div class="cont t3">Hello World!</div>
        <div class="cont t4">How Are You&#63;</div>
        <div class="cont t5">I'm fine ,and you&#63;</div>
      </div>
 </div>

ul이 왼쪽으로 플로팅된 후 후속 요소에 플로팅이 미치는 영향을 지우기 위해 after pseudo-class를 통해 명확한 속성이 설정되고 동시에 ie의 하위 버전이 Zoom에 추가되어 ie를 트리거합니다. 해시레이아웃. 따라서 다음과 같은 스타일이 있습니다.

html,body,div,ul,li{margin:0; padding:0; }

.cl{zoom:1;}
.cl:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
ul{list-style:none;}
    
body{padding-top:100px; background:#eee; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;}
#main{margin:0 auto; width:800px;}
#main #tabbar{}
#main #tabbar li,#main #content .cont{text-align:center; color:#fff;}
#main #tabbar li{padding:0 20px; height:35px; line-height:35px; font-size:14px; cursor:pointer; float:left;}
#main #content{height:350px; overflow:hidden; position:relative;}
#main #content .cont{width:100%; height:350px; line-height:350px; font-size:48px; z-index:0; position:absolute;}

#main #tabbar li.def{color:#333; background:#fff;}
#main #tabbar li.t1,#main #content .cont.t1{color:#fff; background:#4e6b9c;}
#main #tabbar li.t2,#main #content .cont.t2{color:#fff; background:#c52946;}
#main #tabbar li.t3,#main #content .cont.t3{color:#fff; background:#33a6ff;}
#main #tabbar li.t4,#main #content .cont.t4{color:#fff; background:#ffab4e;}
#main #tabbar li.t5,#main #content .cont.t5{color:#fff; background:#64bccc;}

html 부분은 거의 동일합니다.

네이티브 js를 사용하여 구현하는 경우 주로 클릭 이벤트를 각 li에 개별적으로 바인딩합니다. 클릭하면 현재 콘텐츠 페이지가 표시되고 다른 콘텐츠 페이지가 숨겨지므로 콘텐츠의 투명도가 계속해서 증가하거나 감소합니다. 완전히 숨기기 또는 표시될 때까지 타이머를 설정하세요.

window.onload = function(){
  var tabs = document.getElementById("tabbar").getElementsByTagName("li");
  var cont = document.getElementById("content").getElementsByTagName("div");
  var len = cont.length;
  var flag = true;
  
  var fade = function(elem, callback, type){
    type || (type = "in");
    var px, timer;
    
    if(type == "in")
    {
      px = 0;
      timer = setInterval(function(){
        px += 3;
        if(px <= 100)
        {
          elem.style.opacity &#63; (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
        }
        else
        {
          clearInterval(timer);
          elem.style.opacity &#63; (elem.style.opacity = 1) : (elem.style["filter"] = "alpha(opacity=100)");
          callback && callback(elem);
        }
      },10);
    }
    else
    {
      px = 100;
      timer = setInterval(function(){
        px -= 3;
        if(px >= 0)
        {
          document.addEventListener &#63; (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
        }
        else
        {
          clearInterval(timer);
          elem.style.opacity &#63; (elem.style.opacity = 0) : (elem.style["filter"] = "alpha(opacity=0)");
          callback && callback(elem);
        }
      },10);
    }
  }
  
  for(var i = 0; i < len; i++)
  {
    cont[i].style.zIndex = len - i;
    tabs[i].index = cont[i].index = i;
    tabs[i].onclick = function(){
      if(flag)
      {
        flag = false;
        cont[this.index].style.display = "block";
        fade(cont[this.index]);
        for(var i = 0; i < len; i++)
        {
          tabs[i].className = "def";
          if(tabs[i].index != this.index)
          {
            fade
            (
              cont[i],
              function(elem)
              {
                elem.style.display = "none";
                elem.className = "cont t" + (elem.index + 1);
                flag = true;
              },
              "out"
            );
          }
        }
        this.className = "t" + (this.index + 1);
      }
    }
  }
};

위에서 볼 수 있듯이 실제로 네이티브 js를 사용하여 dom을 운영하는 것은 상당히 번거로운 작업입니다. 그렇지 않으면 "적게 쓰고 더 많이" jQuery가 탄생하지 않았을 것입니다. 다음은 jQuery를 사용한 간단한 구현입니다.

$(function(){
    var tabs = $("#tabbar li");
    var cont = $("#content .cont");
    var len = cont.length;
    
    cont.each(function(inx, elem){$(elem).css("z-index", len - inx);}).andSelf().hide().andSelf().eq(1).show();
    
    tabs.click(function(){
      var inx = tabs.index(this);
      tabs.removeAttr("class").addClass("def").andSelf().eq(inx + 1).addClass("t" + (inx + 1));
      cont.fadeOut(300).not(this).andSelf().eq(inx).fadeIn(300);
    });
  }
);

이 예제는 비교적 간단하지만 매우 실용적입니다. 물론 실제 작업에서는 일반적으로 재사용 가능한 컨트롤을 캡슐화하는 기반으로 사용하지 않지만 기본 아이디어는 동일합니다. .

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.