탭 클릭 전환 예제 코드 공유의 JavaScript 구현(그림 및 텍스트)

탭 전환 효과는 클릭 전환, 슬라이딩 전환, 지연 전환, 자동 전환 및 기타 효과를 포함하여 오늘날의 웹 페이지에서 널리 사용됩니다. 이 블로그 게시물에서는 기본 JavaScript를 사용하여 다음과 같은 효과를 얻습니다. 탭 클릭 전환.

탭 전환 효과는 클릭 전환, 슬라이딩 전환, 지연 전환, 자동 전환 및 기타 효과를 포함하여 오늘날의 웹 페이지에서 널리 사용됩니다. 이번 블로그 게시물에서는 기본 Javascript를 통해 탭 클릭 전환 효과를 실현합니다.

1. 함수 구현

html 부분

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p style="display:block;">第一个Nian糕</p>
<p>第二个Nian糕</p>
<p>第三个Nian糕</p>

css 부분

p {
 display: none;
 width: 155px;
 height: 100px;
 border: 1px solid #000;
}

다음은 각 단계에서 구현하려는 기능에 따라 코드로 변환되는 JS 부분. 효과를 얻고 싶을 때마다 먼저 코드를 입력하지 말고 먼저 어떻게 해야 할지 생각해 보세요. 구현, 구조는 어떤지, 이벤트는 어떤 기능에 사용해야 하는지 등 전체 과정을 마음속으로 진행한 후 각 단계의 로직을 코드로 변환합니다. 🎜>

a.

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

요소 가져오기 참고:

는 배열 메서드를 사용하여 처리할 수 있는 [배열과 유사한 객체]를 반환합니다. 배열에 있는 메서드가 없습니다 document.getElementsByTagName

b. 클릭 이벤트를 요소에 바인딩합니다

//第一个按钮的点击事件
btnList[0].onclick = function () {
 btnList[0].style.color = "#fff";
 btnList[0].style.backgroundColor = "#f60";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";
 pList[0].style.display = "block";    
 pList[1].style.display = "none";    
 pList[2].style.display = "none";    
}

//第二个按钮的点击事件
btnList[1].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "#fff";
 btnList[1].style.backgroundColor = "#f60";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";  
 pList[0].style.display = "none";    
 pList[1].style.display = "block";    
}

//第三个按钮的点击事件
btnList[2].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "#fff";
 btnList[2].style.backgroundColor = "#f60";
 pList[0].style.display = "none";    
 pList[1].style.display = "none";    
 pList[2].style.display = "block";  
}

이제 탭 전환 효과를 구현했습니다.

아주 간단하지만 우리가 원하는 효과를 얻었습니다. 독자가 원하는 스타일에 맞게 CSS를 설정한 후 해야 할 일이 있습니다. 다음은 JS 코드를 최적화하는 것입니다

2. 최적화

a. 요소를 가져옵니다

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

b . 각 버튼 요소에 클릭 이벤트를 바인딩합니다.

for(var i = 0; i < btnList.length; i++ ) {
 btnList[i].index = i; //给每个按钮添加index属性，标记是第几个按钮
 btnList[i].onclick = function() {
  for(var j = 0; j < btnList.length; j++) {
   //将所有的按钮样式去掉，块隐藏
   btnList[j].style.color = "";
   btnList[j].style.backgroundColor = "";
   pList[j].style.display = "none";
  }
  //给点击的按钮添加样式，对应的块显示
  this.style.color = "#fff";
  this.style.backgroundColor = "#f60";
  pList[this.index].style.display = "block";
 }
}

index는

에서 검색한 문자열 의 첫 번째 문자 위치를 반환합니다. 0부터 시작하는 성공적인 일치

이것은 Javascript의 키워드로

함수 실행 시 자동으로 생성되는 내부 개체를 나타내는 것으로, 이 경우에만 사용할 수 있습니다. 함수 내부에서 this의 값은 함수 사용 시나리오에 따라 변경되지만 한 가지 원칙만 기억하면 됩니다. 이것은 함수를 호출하는 객체를 나타냅니다.

여기서 this는 해당 클릭 버튼을 가리킵니다. 이를 통해 출력되는 내용을 콘솔 출력

3. ES에서 Let command

볼 수 있다. 6,

에는 변수를 선언하는 데 사용되는 새로운 let 명령이 추가되었습니다. 사용법은 과 유사하지만 선언된 변수는 코드 블록 내에서만 유효합니다. var 명령이 있습니다. let

위 코드에서는

을 사용하고 var는 두 개의 변수를 선언한 다음 이 두 변수를 인쇄합니다. 코드 블록 내부와 외부에서 let 으로 선언한 변수는 올바른 값을 반환하고, 코드 블록 내에서 var 로 선언한 변수는 올바른 값을 반환하며, 코드 블록 외부에서는 let에 의해 선언된 변수가 해당 변수가 위치한 코드 블록에서만 유효하다는 오류를 보고합니다. let let

위 코드에서

변수는

에 의해 선언되고 전역 범위에서 유효하므로 i 이 반복될 때마다 전역 변수 var는 하나만 있습니다. i , 변수의 값이 변경되고 루프의 배열에 할당된 i는 런타임 시 클로저를 통해 동일한 변수 a 를 읽어 마지막 출력이 다음과 같이 됩니다. 휠의 function 값은 10이고, i을 사용하면 선언된 변수는 블록 수준 범위 내에서만 유효하며 최종 출력은 6 i let

a입니다.

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

b. 각 버튼 요소에 클릭 이벤트를 바인딩합니다

for(let i = 0; i < btnLists.length; i++) {
 btnLists[i].onclick = function() {
  for(var j = 0;j < btnLists.length;j++){
   btnLists[j].style.color="";
   btnLists[j].style.backgroundColor="";
   pLists[j].style.display="none";
  }
  this.style.color = "yellow";
  this.style.backgroundColor="#f60";
  pLists[i].style.display="block";
 }
}

마찬가지로 콘솔을 사용하여 i

파일 끝

필수 과정에서 오류나 부적절한 내용이 나타나는 것은 불가피합니다. .더 많은 분들이 오해하지 않도록, 모두가 스크립트하우스를 응원해 주시길 바랍니다.

위 내용은 탭 클릭 전환 예제 코드 공유의 JavaScript 구현(그림 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!