js選項卡功能

時間 2019-11-24

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js選項卡功能</title>
    <style>
        .btn {
            width: 60px;
            hieght: 30px;
        }
 
        .content {
            width: 200px;
            height: 200px;
            border: 1px solid #b1b3b0;
            display: none;
        }
 
        .on {
            background: #2d64b3;
            color: #fff;
        }
 
    </style>
</head>
<body>
<button class="btn on">導航1</button>
<button class="btn">導航2</button>
<button class="btn">導航3</button>
<div class="content" style="display: block;">內容1</div>
<div class="content">內容2</div>
<div class="content">內容3</div>
</body>
<script>
    var btn = document.getElementsByTagName('button');
    var content = document.getElementsByClassName('content');
    for (var i = 0; i < btn.length; i++) {
        (function (n) {
            btn[i].onclick = function () {
                for (var j = 0; j < btn.length; j++) {
                    btn[j].className = "";
                    content[j].style.display = 'none'
                }
                this.className = "on";
                content[n].style.display = 'block'
            }
        }(i))
    }
</script>
</html>

1. js選項卡功能3
2. js選項卡功能4
3. js選項卡功能2
4. js選項卡
5. JS 選項卡
6. JS——選項卡
7. js tab選項卡 mootools tab選項卡
8. 使用原生js實現選項卡功能實例教程
9. 製做一個選項卡功能
10. angularJS 實現選項卡功能
更多相關文章...
• ionic tab(選項卡) - ionic 教程
• ionic 選項卡欄操作 - ionic 教程
• SpringBoot中properties文件不能自動提示解決方法
• IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。