溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

原生js實現(xiàn)tab切換

發(fā)布時間：2020-06-28 01:23:24 來源：網(wǎng)絡(luò) 閱讀：1556 作者：maobinhou 欄目：web開發(fā) 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0}
a{ display:inline-block;*display:inline;zoom:1;padding:5px 15px; background:#ccc; margin-right:10px}
.hide{ display:none}
.show{ display:block}
</style>
</head>
<body>
<a href="javascript:;">1</a><a href="javascript:;">2</a><a href="javascript:;">3</a>
<div>內(nèi)容1</div><div>內(nèi)容2</div><div>內(nèi)容3</div>
<script type="text/javascript">
  var btn=document.getElementsByTagName("a"),box=document.getElementsByTagName("div");
  for(var i=0;i<btn.length;i++){
      function tab(n){
       btn[n].         for(var j=0;j<box.length;j++){
            box[j].className="hide";    
        }
        box[n].className="show";      
      }  
    }
    tab(i)   
 }
       
</script>
<script type="text/javascript">
var btn=document.getElementsByTagName("a"),box=document.getElementsByTagName("div");
for(var i=0;i<btn.length;i++){
    (function(_i){
        btn[_i].                       //利用js閉包實現(xiàn)tab切換
            for(var j=0;j<box.length;j++){
                box[j].className="hide";
            }
            box[_i].className="show";   
        }   
    })(i);
}
</script>
</body>
</html>


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手