js+css 태그 내용 전환 기능 구현(인 스 턴 스 설명)

7653 단어 js라벨내용 전환
먼저 효과 그림 과 코드 를 첨부 합 니 다:

html 문서:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="../js/tabs_function.js"></script>
 <script type="text/javascript">
  window.onload = function main() {
   Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");

  }
 </script>
 <style type="text/css">
  #list-title {
   width: 318px;
   height: 56px;
   margin: 0;
   list-style-type: none;
   padding-left: 0;
  }

  .list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

  #content-box {
   position: relative;
   clear: both;
   width: 314px;
   height: 302px;
   margin: 0 2px;
  }

  .contents {
   position: absolute;
   left: 0;
   top: 0;
   width: 312px;
   height: 300px;
   margin: 0;
   font-size: 32px;
   line-height: 300px;
   text-align: center;
   border: 1px solid #000;
   z-index: 0;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
  }

  .contents-checked {
   z-index: 1;
   opacity: 1;
   visibility: visible;
  }
 </style>
</head>
<body>
<ul id="list-title">
 <li class="list-item list-item-checked">1</li>
 <li class="list-item">2</li>
 <li class="list-item">3</li>
</ul>
<div id="content-box">
 <div class="contents contents-checked" style="background-color: #c8ff40;">content_1</div>
 <div class="contents" style="background-color: #41ff6f;">content_2</div>
 <div class="contents" style="background-color: #ff82a0;">content_3</div>
</div>
</body>
</html>
js 파일:

/**
 * Created by Administrator on 2016/9/12.
 */

/*
 * tabs_name:            ；
 * contents_name:       ；
 * tabs_checked_style:           ；
 * contents_checked_style:             ；
 *
 * classList.toggle();
 *                   ，      ，       ；
 * */
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
 var tabs = document.querySelectorAll(tabs_name),
  contents = document.querySelectorAll(contents_name),
  e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }
}
원리 메커니즘
css 에서 클래스 의 중첩 효과 에 대하 여.
하나의 요 소 는 여러 종류의 이름 을 추가 할 수 있 고 여러 종류의 스타일 로 레이 어드 되 어 표 시 될 수 있다 는 것 을 알 고 있 습 니 다.
예 를 들 면:


.list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }
첫 번 째 li 의 class 속성 중 두 가지 유형 이 있 습 니 다."list-item"과"list-item-checked"입 니 다.그러면 이 li 요 소 는 이 두 가지 스타일 을 동시에 가지 게 될 것 이다.
비교 해 보면 두 번 째 와 세 번 째 li 의 class 는'list-item'밖 에 없다.그래서 그들 은.list-item-checked 가 설정 한 스타일 을 가지 고 있 지 않 습 니 다.
테마 로 돌아 가 탭 을 전환 합 니 다.실제 적 으로 요 소 를 가 져 온 다음 에 요소 의 스타일 을 수정 합 니 다.그러면 그 중의 요소 스타일 은'classList'를 통 해 요소 의 유형 명 을 제어 하여 스타일 을 수정 할 수 있 습 니 다.
classList 방법 을 간단히 소개 합 니 다.
1.element.classList 는 요소 의 클래스 이름 목록 만 가 져 옵 니 다.
2. element.clasList.add(value); 이 방법 은 요소 의 클래스 이름 목록 에 지정 한 클래스 이름 을 추가 하 는 것 입 니 다.
3. element.classList.remove(value); 이 방법 은 요소 의 클래스 이름 목록 에서 지정 한 클래스 이름 을 삭제 합 니 다.
4. element.classList.contains(value); 이 방법 은 요소 의 클래스 이름 목록 에 지정 한 클래스 이름 이 있 는 지 판단 하 는 것 입 니 다.이 방법 은 불 값 을 되 돌려 줍 니 다.
5. element.classList.toggle(value); 이 방법 은 요소 의 클래스 이름 목록 에 지정 한 클래스 이름 이 있 는 지 판단 하고 존재 하면 이 클래스 이름 을 삭제 합 니 다.존재 하지 않 으 면 이 클래스 이름 을 추가 합 니 다.
그 중에서'value'의 값 은 변수 나 문자열 상수 일 수 있 습 니 다.

 element.classList.add("class-name"); //    
 element.classList.add(class_name); //   
 
 element.classList.remove(class_name);
 element.classList.contains(class_name); // true,false
 element.classList.toggle(class_name); //    ，   ；
js 부분

e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }
1. “e_mark"의 역할:

e_mark = 0;　　
최초의"emark 의 값 은 0 입 니 다.emark 는 현재 선 택 된 요소 가 번호 가 0 인 요 소 를 가리 키 고 있 습 니 다.
2."tabs[i].num=i"의 역할:

tabs[i].num = i;　　
상부 의 for 순환 에서'i'의 값 은 바로'tabs'배열 의 각 요소 의 아래 표 시 된 값 입 니 다."onclick"등 이벤트 의 익명 함수 에서"i"의 값 을 직접 가 져 올 수 없습니다.즉,요소 가 클릭 되 었 을 때 촉발 하 는 함 수 는'tabs'배열 의 몇 번 째 요소 가 클릭 되 었 는 지 알 수 없습니다.모든 요소 가 이 함 수 를 촉발 할 수 있 기 때 문 입 니 다.그러나 함 수 는'this'를 통 해 어떤 요소 가 클릭 되 었 는 지 알 수 있 습 니 다.이 클릭 된 요 소 는 몇 번 째 이 고 이 클릭 된 요소 의 사용자 정의 값 을 통 해 얻 을 수 있 습 니 다.
요소 가 클릭 되 기 전에 이 요소 들 에 게 num(사용자 정의 값)번 호 를 연결 하면'this.num'을 통 해 이 요소 의 번 호 를 얻 을 수 있 습 니 다.이 요소 가'tabs'배열 의 몇 번 째 요소 라 는 것 을 알 수 있다.
3.현재 요소 와 업데이트 요소 의 스타일 수정:

tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);　
위 에서 말 했 듯 이"e"mark'는 현재 요소 의 번호 이 고'this.num'은 클릭 되 고 새로 선 택 된 요소 의 번호 입 니 다.
그러면 요소 가 클릭 되 었 을 때 두 가지 일 을 해 야 합 니 다.1.현재 선택 한 요소 의 스타일 을 일반 스타일 로 복원 합 니 다.2.클릭 한 요소 의 스타일 을 선택 한 스타일 로 변경 합 니 다.
classList 방법 을 결합 하면.list-item-checked 는 선택 되 었 을 때 추 가 된 스타일 입 니 다.선택 한 요 소 는 이 클래스 만 추가 하면 되 고 선택 되 지 않 은 요 소 는 이 클래스 를 제거 합 니 다.
이상 의 js+css 는 태그 내용 전환 기능(인 스 턴 스 설명)을 실현 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
JS 구현 의 전체 배열 조합 알고리즘 예시
js 를 이용 하여 웹 페이지 진도 바 효 과 를 작성 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage