집 >웹 프론트엔드 >JS 튜토리얼 >js 및 css 태그 콘텐츠 전환 기능 구현에 대한 튜토리얼

js 및 css 태그 콘텐츠 전환 기능 구현에 대한 튜토리얼

小云云원래의: 2018-01-27 11:18:451394검색

이 글은 주로 레이블 내용 전환 기능을 구현하기 위해 js + css를 공유합니다(예시 포함 설명). 먼저 렌더링을 첨부하고 예제 코드를 가르쳐 드리며 도움이 되길 바랍니다.

먼저 렌더링과 코드를 첨부하세요:

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>
<p id="content-box">
 <p class="contents contents-checked" style="background-color: #c8ff40;">content_1</p>
 <p class="contents" style="background-color: #41ff6f;">content_2</p>
 <p class="contents" style="background-color: #ff82a0;">content_3</p>
</p>
</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의 클래스 속성에는 .list-item 및 .list-item-checked라는 두 가지 클래스 이름이 있는 것을 볼 수 있습니다. 그러면 이 li 요소는 두 클래스의 스타일을 동시에 갖게 됩니다.

이에 비해 두 번째와 세 번째 li 클래스에는 .list-item만 있습니다. 따라서 .list-item-checked에 의해 설정된 스타일이 없습니다.

주제로 돌아가서 레이블을 전환하고 실제로 요소를 가져온 다음 요소의 스타일을 수정하세요. 그런 다음 요소 스타일을 "classList"로 제어하여 요소의 클래스 이름을 제어함으로써 스타일을 수정할 수 있습니다.

classList 메소드에 대한 간략한 소개입니다.

1. element.classList는 요소의 클래스 이름 목록을 가져옵니다.

2. element.clasList.add(value); 이 메소드는 지정된 클래스 이름을 요소의 클래스 이름 목록에 추가하는 것입니다. 요소의 클래스 이름 목록에서 이름을 삭제합니다.

4. element.classList.contains(value) 이 메서드는 지정된 클래스 이름이 요소의 클래스 이름 목록에 있는지 확인하는 것입니다. 불리언 값

5. element.classList .toggle(value); 이 메소드는 요소의 클래스 이름 목록에 지정된 클래스 이름이 있는지 확인하는 것입니다. 존재하지 않으면 클래스 이름을 추가합니다. 클래스 이름 중 "value"의 값은 변수 또는 문자열 상수일 수 있습니다.

js part

 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); // 有则删，无则添；

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;
  };
 }

초기 "e_mark ”의 값은 “0”입니다. "e_mark"가 현재 선택된 요소(숫자 "0")를 가리킨다는 것을 나타냅니다.

2. "tabs[i].num=i"의 역할:

e_mark = 0;

상위 for 루프에서 "i"의 값은 실제로 각 요소의 하위 값입니다. "탭" 배열 표준 값입니다. 왜냐하면 "onclick"과 같은 이벤트의 익명 함수에서는 "i"의 값을 직접 얻을 수 없기 때문입니다. 즉, 요소를 클릭하면 트리거된 함수는 "탭" 배열의 어떤 요소가 클릭되었는지 알 수 없습니다. 각 요소가 이 기능을 트리거할 수 있기 때문입니다. 그러나 함수는 "this"를 사용하여 클릭된 요소의 수를 알 수 있으며, 클릭된 요소의 사용자 정의 값을 통해 얻을 수 있습니다. 요소를 클릭하기 전에 먼저 num(사용자 정의 값) 요소에 숫자를 바인딩한 다음 "this.num"을 통해 이 요소의 번호를 얻을 수 있습니다. 또한 이 요소가 "tabs" 배열에 어떤 요소인지 알 수 있습니다.

3. 현재 요소와 업데이트된 요소의 스타일을 수정합니다.

tabs[i].num = i;

위에서 언급했듯이 "e_mark"는 현재 요소의 번호이고 "this.num"은 클릭한 것입니다. 새로 선택한 요소 번호. 따라서 요소를 클릭하면 두 가지 작업을 수행해야 합니다. 1. 현재 선택한 요소의 스타일을 일반 스타일로 복원합니다. 2. 클릭한 요소의 스타일을 선택했을 때의 스타일로 수정합니다.

classList 메소드와 결합하면 .list-item-checked가 선택 시 추가되는 스타일이라는 것을 알 수 있습니다. 선택한 요소는 이 클래스 이름만 추가하면 되고 선택되지 않은 요소는 이 클래스 이름을 제거합니다.

js 및 css 태그 콘텐츠 전환 기능 구현에 대한 튜토리얼

관련 기사