Javascript/Jquery를 사용하여 효율적인 탭 전환 만들기

Question

참고 : 타사 탭 시스템을 사용하는 것은 옵션이 아니므로 권장하지 마십시오.

내 페이지에는 여러 개의 탭이 있고 여러 개의 탭이 있습니다. 각 div는 여러 개의 탭에 속할 수 있습니다. 예를 들어 모든 div가 '모든'탭에 속한 다음 '오늘'탭, '내일'탭 등의 div가 있습니다.

내가 원하는 것은 사용자가 오늘을 클릭하면 탭에서 해당 탭에 속한 div 만 표시하려고합니다. 다른 탭을 클릭하면 이전 탭의 div가 숨겨져 선택된 탭의 div가 표시됩니다. 지금까지의 표준 탭 동작.

그러나 이것이 다른 경우 하나의 div는 여러 탭간에 공유 될 수 있습니다.

새 탭을 선택할 때마다 마지막으로 선택한 탭의 모든 div를 반복하여 숨기고 현재 탭의 div를 반복하여 보여줄 수 있다고 생각했습니다.

그러나 더 효율적인/덜 CPU 집약적 인 방법이 있을지 궁금하네요. 또한이 방법을 사용하면 마지막 탭과 현재 탭간에 공유되는 경우 즉시 잠시 후에 다시 표시되도록 일부 div가 숨겨집니다. 예 : div_111은 오늘과 내일 사이에 공유 될 수 있습니다. 사용자가 오늘을 클릭하면 div_111이 표시되고 내일을 클릭하면 div_111이 처음에는 숨겨져 다시 표시됩니다.

제안 사항?

Answer 1

조심하고 싶은 것은 다시 그리기입니다. 요소를 추가하거나 제거 할 때 브라우저는 변경 사항이 페이지의 다른 모든 요소에 미치는 영향을 파악하고 이에 따라 모든 요소의 위치를 ​​조정하거나 크기를 조정해야합니다. 이 프로세스는 거의 항상 DOM 조작에서 가장 비싼 부분입니다. 어떤 요소가 어떤 탭에 들어가는 지 파악하는 것보다 확실히 비용이 많이 듭니다.

브라우저는 다시 그리기를 최적화하려고합니다. 가능한 한 페이지를 다시 그리지 않고 여러 번 변경 사항을 동일한 다시 그리기로 그룹화하는 경우가 있습니다. 그러나 문제를 직접 해결하는 것이 가장 좋습니다. DOM에서 부모 노드를 먼저 제거한 다음 변경 사항을 모두 작성한 다음 다시 추가하여 두 개 이상의 다시 그리기가 없도록 할 수 있습니다. 순간적으로 도약하기 위해 아래의 내용을 일으킬 수 container을 제거, 레이아웃에 따라

var container = document.getElementById('container'), 
    buffer = document.createDocumentFragment(), 
    newNodes = tabs[selection], // an array or object, generated at page load, 
           // containing all divs that show up in this tab 
    i, div; 
document.body.removeChild(container); 
for (i = 0; div = newNodes[i]; i++) { 
    buffer.appendChild(div); // if div is in container then it will be 
          // automatically removed 
} 
container.innerHTML = ''; // probably more efficient to remove nodes individually 
container.appendChild(buffer); 
document.body.appendChild(container); 

: 다음은 간단한 예입니다. 세련된 모양을 원하면 container의 부모를 고정 시키거나 그 자리에 자리 표시자를 container.parentNode.replaceNode()으로 삽입 할 수 있습니다.

다시 그리기를 최소화하면 효율성 문제가 없어야합니다. 그러나 여전히 콘텐츠 삽입 논리를 조정해야합니다. 이를 수행하는 가장 간단한 방법은 아마 각 콘텐츠 유형에 대해 다른 컨테이너를 사용하여 여러 탭에 표시되는 콘텐츠의 단일 탭에 연결된 콘텐츠를 분리하는 것입니다. 최상의 솔루션은 필요 이상으로 일반화되지 않는 솔루션이라는 것을 기억하십시오.