web前端：做一個選項卡幻燈片效果的實戰案例

如題， 小編今天就是帶你來做一個類似於點擊欄目或選項卡， 就會自動的更換背景！

這個還是挺好的， 出自於用戶體驗的原則中， 這個體驗還是非常不錯的

所以小編今天就帶你來學習這個！

那麼我們先看看效果圖：

實例圖

上圖中的選項卡可以隨便更換背景顏色， 那麼這個是怎麼更換的呢？

我們來看一下實例代碼：

HTML實例代碼：

點擊各個選項切換內容:

阿景前端

前端

前端UI

後端

CSS實例代碼：

body {font-family: "Lato", sans-serif;}

.tablink {

background-color: #555;

color: white;

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

font-size: 17px;

width: 25%;}

.tablink:hover {background-color: #777;}

/* Style the tab content */

.tabcontent {

color: white;

display: none;

padding: 50px;

text-align: center;}

#London {background-color:red;}

#Paris {background-color:green;}

#Tokyo {background-color:blue;}

#Oslo {background-color:orange;}

JavaScript實例代碼：

function openCity(cityName,elmnt,color) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none"; }

tablinks = document.getElementsByClassName("tablink");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].style.backgroundColor = ""; }

document.getElementById(cityName).style.display = "block";

elmnt.style.backgroundColor = color;}

// 觸發 id="defaultOpen" click 事件

document.getElementById("defaultOpen").click();

上面這個就是實例圖中的實例代碼， 也是本選項卡幻燈效果實戰案例的實例代碼！

如果有不懂的關注頭條， 來問我！

前端就是要練， 你今天自己實戰一下就知道原理了！