亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)

 更新時(shí)間：2017年10月09日 09:18:04   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

先附上效果圖和代碼：

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:用于觸發(fā)事件的標(biāo)簽的類名；
 * contents_name:內(nèi)容容器的類名；
 * tabs_checked_style:標(biāo)簽為選中狀態(tài)時(shí)的樣式；
 * contents_checked_style:內(nèi)容容器為選中狀態(tài)時(shí)的樣式；
 *
 * 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;
  };
 }
}

原理機(jī)制

關(guān)于css中，類的疊加效果。

我們知道，一個(gè)元素可以添加多個(gè)類名，同時(shí)會(huì)被多個(gè)類的樣式層疊起來(lái)顯示。

例如：

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

可以看到，第一個(gè)li的class屬性中，有兩個(gè)類名：.list-item 和 .list-item-checked。那么這個(gè)li元素就會(huì)同時(shí)擁有這個(gè)兩個(gè)類的樣式。

相比較，第二個(gè)和第三個(gè)li的class只有：.list-item。因此他們不會(huì)擁有 .list-item-checked 所設(shè)置的樣式。

回到主題，標(biāo)簽切換，實(shí)際就是獲取到元素，然后修改元素的樣式。那么其中的元素樣式就可以通過(guò)“classList”來(lái)控制元素的類名，從而修改樣式。

簡(jiǎn)單介紹 classList 方法。

1. element.classList 只是獲取到元素的類名列表。

2. element.clasList.add(value); 該方法是向元素的類名列表中添加指定的類名

3. element.classList.remove(value); 該方法是從元素的類名列表中刪除指定的類名

4. element.classList.contains(value); 該方法是判斷元素的類名列表中是否存在指定的類名；該方法會(huì)返回一個(gè)布爾值

5. element.classList.toggle(value); 該方法是判斷元素的類名列表中是否存在指定的類名，如果存在，則刪除該類名；如果不存在，則添加該類名

其中，“value”的值可以為一個(gè)變量或者字符串常量；

 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); // 有則刪，無(wú)則添；

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;　　

初始的 “e_mark” 的值為“0”。表示“e_mark”指向的是當(dāng)前被選中的元素為編號(hào)是“0”的那個(gè)元素。

2. “tabs[i].num=i” 的作用：

tabs[i].num = i;　　

在上層的for循環(huán)中，“i”的值其實(shí)就是“tabs”數(shù)組中各個(gè)元素的下標(biāo)值。由于“onclick”等事件的匿名函數(shù)中無(wú)法直接獲取到“i”的值。也就是說(shuō)，當(dāng)元素被點(diǎn)擊時(shí)，觸發(fā)的函數(shù)無(wú)法得知是“tabs”數(shù)組中的第幾個(gè)元素被點(diǎn)擊了，因?yàn)槊恳粋€(gè)元素都可能觸發(fā)這個(gè)函數(shù)。但是，函數(shù)可以通過(guò)“this”來(lái)得知是哪一個(gè)元素被點(diǎn)擊了，至于這個(gè)被點(diǎn)擊的元素是第幾個(gè)，可以通過(guò)這個(gè)被點(diǎn)擊的元素的一個(gè)自定義值來(lái)獲取。

我們?cè)谠乇稽c(diǎn)擊之前，先給這些元素綁定一個(gè)編號(hào)：num（自定義值），那么就可以通過(guò)“this.num”來(lái)獲取到這個(gè)元素的編號(hào)。也就知道這個(gè)元素是“tabs”數(shù)組中的第幾個(gè)元素了。

3. 修改當(dāng)前元素和更新元素的樣式：

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

上面說(shuō)到，“e_mark” 為當(dāng)前元素的編號(hào)，而“this.num”為被點(diǎn)擊及新選中的元素的編號(hào)。

那么當(dāng)元素被點(diǎn)擊時(shí)，需要做兩件事：1.把當(dāng)前被選中的元素的樣式還原到普通的樣式，2.將被點(diǎn)擊的元素的樣式修改為被選中時(shí)的樣式。

結(jié)合classList的方法，我們知道：.list-item-checked 為被選中時(shí)追加的樣式，選中的元素只需添加這個(gè)類名即可，而未被選中的元素則移除這個(gè)類名。

以上這篇js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論