Tutorial on implementing js and css tag content switching function-JS Tutorial-php.cn

This article mainly shares with you js + css to realize the label content switching function (explanation with examples). We first attach the renderings and teach you with example code, hoping to help you.

Attach the renderings and code first:

## html document:

<!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>

Copy after login

js file:

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

Copy after login

Principle and mechanism

About the overlay effect of classes in css.

We know that multiple class names can be added to an element, and at the same time, the styles of multiple classes will be cascaded and displayed.

For example:

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

Copy after login

You can see that the first li In the class attribute, there are two class names: .list-item and .list-item-checked. Then this li element will have the styles of both classes at the same time.

In comparison, the second and third li classes only have: .list-item. So they won't have the styles set by .list-item-checked.

Return to the topic, switch labels, actually get the element, and then modify the style of the element. Then the element style can be controlled by "classList" to control the class name of the element, thereby modifying the style.

#A brief introduction to the classList method. 1. element.classList just gets the list of class names of elements.

2. element.clasList.add(value); This method adds the specified class name to the element’s class name list

3. element.classList.remove(value); The The method is to delete the specified class name from the element's class name list

4. element.classList.contains(value); This method is to determine whether the specified class name exists in the element's class name list; this method Will return a Boolean value

5. element.classList.toggle(value); This method is to determine whether the specified class name exists in the element's class name list. If it exists, delete the class name; if not If it exists, add the class name

where the value of "value" can be a variable or a string constant;

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

Copy after login

js part

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

Copy after login

1. The role of “e_mark”:

e_mark = 0;

Copy after login

The initial value of "e_mark" is "0". Indicates that "e_mark" points to the element currently selected with the number "0".

2. The function of “tabs[i].num=i”:

tabs[i].num = i;

Copy after login

In the upper for loop, the value of "i" is actually the subscript value of each element in the "tabs" array. Because the value of "i" cannot be directly obtained in anonymous functions of events such as "onclick". In other words, when an element is clicked, the triggered function cannot know which element in the "tabs" array was clicked, because each element may trigger this function. However, the function can use "this" to know which element was clicked. As for the number of the clicked element, it can be obtained through a custom value of the clicked element.

Before the elements are clicked, we first bind a number to these elements: num (custom value), then we can get the number of this element through "this.num". You also know which element this element is in the "tabs" array.

3. Modify the styles of the current element and the updated element:

tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);

Copy after login

As mentioned above, " e_mark" is the number of the current element, and "this.num" is the number of the clicked and newly selected element.

Then when the element is clicked, two things need to be done: 1. Restore the style of the currently selected element to the normal style, 2. Modify the style of the clicked element to the one when it was selected. style.

Combined with the classList method, we know: .list-item-checked is the style added when selected. The selected element only needs to add this class name, while the unselected element will remove this Class name.

Related recommendations:

JS implementation of alternative accordion effect web content switching code_javascript skills

The above is the detailed content of Tutorial on implementing js and css tag content switching function. For more information, please follow other related articles on the PHP Chinese website!