javascript - js 탭 예제에서 특정 탐색의 의미를 잘 이해하지 못합니다. . .

Question

으아아아

인터넷에 있는 탭의 예인데, 예의 js 부분과 두 번째 for 루프가 무엇을 의미하는지 잘 이해가 되지 않습니다. . . QAQ

Answer 1

for의 외부 레이어는 주로 onclick이벤트를 각 탭 버튼에 바인딩하는 것입니다.

for inside는 바운드 onclick事件之内，它的作用是，
当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个for 이벤트 내에 있습니다. 그 기능은

바운드 탭을 클릭하면 모든 탭을 순회하고 클릭한 탭이 모두 재설정됩니다. 숨겨진 상태로 전환한 다음

는 아래와 같습니다.

으아악

현재 클릭한 항목에 해당하는 탭을 표시하는 것입니다.

이렇게 하면 현재 클릭한 항목에 해당하는 탭만 표시되고 나머지 탭은 숨겨집니다.
이것이 없으면 첫 번째 라벨을 클릭하면 첫 번째 라벨이 표시됩니다.
그런 다음 두 번째 탭을 클릭하면 두 번째 탭이 표시되고 이제 첫 번째 탭과 두 번째 탭이 동시에 표시됩니다.

그런 다음 세 번째 탭을 클릭하면 처음 두 개는 숨겨지지 않고 세 개의 탭이 표시됩니다. ..

이런 식으로 결국 탭 버튼을 모두 클릭하면 탭이 모두 표시되는 것은 분명 탭의 효과는 아닙니다. for

현재 클릭한 탭을 제외한 모든 탭을 숨기려면 현재 탭을 표시하기 전에 🎜를 사용하여 모든 탭을 탐색하고 숨깁니다. 🎜

Answer 2

일반적인 기능은 탭을 클릭하여 탭으로 전환하는 것입니다.
소위 전환이란 숨겨져 있거나 현재 표시되는 다른 것을 의미합니다.
그리고 말씀하신 부분은 모든 입력을 숨기는 부분입니다.
즉, 예를 클릭할 때마다 모든 입력이 한 번 순회되고 클래스 및 표시 속성을 제거하고 숨깁니다.
그런 다음 이것을 추가하면 됩니다. 즉, 현재 클릭한 항목에 클래스 및 표시 속성이 포함되어 표시됩니다

Answer 3

제가 코드를 댓글로 달고, 댓글을 보시면 아실거에요! 코드의 원리는 먼저 모든 입력의 클래스 이름을 지우고 모든 p를 숨긴 다음 현재 클릭한 입력에 클래스 이름을 추가하고 현재 인덱스에 해당하는 p를 표시하는 것입니다!

으아악