欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

4種JavaScript實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的方法

 更新時(shí)間：2016年01月06日 09:15:17   作者：Cakty、Riven  
這篇文章主要介紹了4種JavaScript實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的方法，感興趣的小伙伴們可以參考一下

本文實(shí)例講解了4種JavaScript實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的方法，分享給大家供大家參考，具體內(nèi)容如下
效果圖：

 

方法一：for循環(huán)+if判斷當(dāng)前點(diǎn)擊與自定義數(shù)組是否匹配

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切換</title>
 <style type="text/css">
 button {
  width:120px;
  height: 32px;
  line-height: 32px;
  background-color: #ccc;
  font-size: 24px;
 }
 div {
  display: none;
  width:200px;
  height: 200px;
  font-size: 72px;
  color:#ddd;
  background-color: green;
  border:1px solid black;
 }
 </style>
</head>
<body>
 <button style="background-color: yellow;">1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
 <div style="display:block;">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 //定義數(shù)組并獲取數(shù)組內(nèi)各個(gè)的節(jié)點(diǎn)
 var buttonArr = document.getElementsByTagName("button");
 var divArr = document.getElementsByTagName("div");
 for(var i = 0; i < buttonArr.length;i++) {
 buttonArr[i].onclick = function() {
  //this 
  // alert(this.innerHTML)
  //for循環(huán)遍歷button數(shù)組長(zhǎng)度
  for(var j = 0; j < buttonArr.length; j++) {
  //重置所有的button樣式
  buttonArr[j].style.backgroundColor = "#ccc";
  //給當(dāng)前的(點(diǎn)擊的那個(gè))那個(gè)button添加樣式
  this.style.backgroundColor = "yellow";
  //隱藏所有的div
  divArr[j].style.display = "none";
  //判斷當(dāng)前點(diǎn)擊是按鈕數(shù)組中的哪一個(gè)？
  if(this == buttonArr[j]) {
   // alert(j);
   //顯示點(diǎn)擊按鈕對(duì)應(yīng)的div
   divArr[j].style.display = "block";
  }
  }
 }
 }
 </script>
</body>
</html>

方法二：自定義index為當(dāng)前點(diǎn)擊

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切換</title>
 <style type="text/css">
 button {
  width:120px;
  height: 32px;
  line-height: 32px;
  background-color: #ccc;
  font-size: 24px;
 }
 div {
  display: none;
  width:200px;
  height: 200px;
  font-size: 72px;
  color:#ddd;
  background-color: green;
  border:1px solid black;
 }
 </style>
</head>
<body>
 <button style="background-color: yellow;">1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
 <div style="display:block;">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 var buttonArr = document.getElementsByTagName("button");
 var divArr = document.getElementsByTagName("div");
 for(var i = 0; i < buttonArr.length;i++) {
 buttonArr[i].index = i;
 // buttonArr[i].setAttribute("index",i);
 buttonArr[i].onclick = function() {
  for(var j = 0; j < buttonArr.length; j++) {
  buttonArr[j].style.backgroundColor = "#ccc";
  buttonArr[this.index].style.backgroundColor = "yellow";
  divArr[j].style.display = "none";
  divArr[this.index].style.display = "block";
  }
 }
 }
 
 </script>
</body>
</html>

方法三：className

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab</title>
 <style type="text/css">
 * {padding:0; margin:0;}
 button {
  background-color: #ccc;
  width:80px;
  height: 30px;
 }
 .btn-active {
  background-color: yellow;
  font-weight:bold;
  font-size: 14px;
 }
 div{
  width:200px;
  height: 200px;
  font-size: 64px;
  background-color: #0c0;
  display: none;
  color:#fff;
 }
 .div-active {
  display: block;
 }
 </style>
</head>
<body>
 <button class="btn-active">按鈕1</button>
 <button>按鈕2</button>
 <button>按鈕3</button>
 <button>按鈕4</button>
 <div class="div-active">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 //1.先獲取元素
 var buttonList = document.getElementsByTagName("button");
 var divList = document.getElementsByTagName("div");
 //2.添加事件
 for(var i = 0; i < buttonList.length; i++) {
 buttonList[i].index = i;
 buttonList[i].onclick = function() {
  for(var j = 0; j < buttonList.length;j++) {
  buttonList[j].className = "";
  divList[j].className = "";
  }
  this.className = "btn-active";
  divList[this.index].className = "div-active";
 }
 }
 </script>
</body>
</html>

方法四：className+匿名函數(shù)的自執(zhí)行

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab</title>
 <style type="text/css">
 * {padding:0; margin:0;}
 button {
  background-color: #ccc;
  width:80px;
  height: 30px;
 }
 .btn-active {
  background-color: yellow;
  font-weight:bold;
  font-size: 14px;
 }
 div{
  width:200px;
  height: 200px;
  font-size: 64px;
  background-color: #0c0;
  display: none;
  color:#fff;
 }
 .div-active {
  display: block;
 }
 </style>
</head>
<body>
 <button class="btn-active">按鈕1</button>
 <button>按鈕2</button>
 <button>按鈕3</button>
 <button>按鈕4</button>
 <div class="div-active">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 //1.先獲取元素
 var buttonList = document.getElementsByTagName("button");
 var divList = document.getElementsByTagName("div");
 //2.添加事件
 for(var i = 0; i < buttonList.length; i++) {
 (function(i){ //匿名函數(shù)自執(zhí)行
  buttonList[i].onclick = function() {
  for(var j = 0; j < buttonList.length;j++) {
   buttonList[j].className = "";
   divList[j].className = "";
  }
  this.className = "btn-active";
  divList[i].className = "div-active";
  }
 })(i)
 }
 </script>
</body>
</html>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • javascript最基本的函數(shù)匯總

    javascript最基本的函數(shù)匯總

    這篇文章主要給大家匯總介紹了javascript最基本的7個(gè)函數(shù)，十分的實(shí)用，有需要的小伙伴可以參考下。
    2015-06-06
  • JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】

    JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】

    這篇文章主要介紹了JS二級(jí)菜單不同實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了4種不同的二級(jí)下拉菜單實(shí)現(xiàn)方法,需要的朋友可以參考下
    2018-12-12
  • 詳解ES6數(shù)組方法find()、findIndex()的總結(jié)

    詳解ES6數(shù)組方法find()、findIndex()的總結(jié)

    這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • 如何使用pm2快速將項(xiàng)目部署到遠(yuǎn)程服務(wù)器

    如何使用pm2快速將項(xiàng)目部署到遠(yuǎn)程服務(wù)器

    這篇文章主要介紹了如何使用pm2快速將項(xiàng)目部署到遠(yuǎn)程服務(wù)器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03
  • JavaScript實(shí)現(xiàn)數(shù)組降維詳解

    JavaScript實(shí)現(xiàn)數(shù)組降維詳解

    大家都知道將多維數(shù)組（尤其是二維數(shù)組）轉(zhuǎn)化為一維數(shù)組是業(yè)務(wù)開發(fā)中的常用邏輯，除了使用樸素的循環(huán)轉(zhuǎn)換以外，我們還可以利用Javascript的語言特性和數(shù)據(jù)結(jié)構(gòu)的思想實(shí)現(xiàn)更為簡(jiǎn)潔優(yōu)雅的轉(zhuǎn)換。下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組降維吧。
    2017-01-01
  • 原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫

    原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫，使用了requestAnimationFrame，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感為興趣的小伙伴們可以參考一下
    2022-01-01
  • js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法

    js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法

    這篇文章主要介紹了js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法,涉及javascript操作彈出div層的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-02-02
  • Rxjs tap 操作符的使用場(chǎng)景示例

    Rxjs tap 操作符的使用場(chǎng)景示例

    這篇文章主要為大家介紹了Rxjs tap 操作符的使用場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-07-07
  • js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果實(shí)例

    js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果實(shí)例

    這篇文章主要介紹了js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果,實(shí)例分析了javascript鼠標(biāo)事件及頁面樣式的操作技巧,需要的朋友可以參考下
    2015-05-05

最新評(píng)論