对前端JavaScript也很有兴趣,正在看《JavaScript 权威指南》第二部分 浏览器JavaScript

这本书,很久前看过第一部分

最近发现自己对前端也很感兴趣,手打了一把 13-1 例子的代码 很爽。


<!DOCTYPE html>
<html>
<head>
    <style>
        .revealed * {display: block;}
        .reveal * {
            display: none;
        }

        .reveal *.handle {
            display: block;
        }

    </style>
    <script>
        (function(){  window.onload = function () {
            var elements = document.getElementsByClassName("reveal");

            for (var i = 0; i < elements.length; i++) {
                var elt = elements[i];
                var title = elt.getElementsByClassName("handle")[0];

                addRevealHandler(title, elt);
            }

            function addRevealHandler(title, elt) {
                title.onclick = function () {
                    if (elt.className == "reveal")
                        elt.className = "revealed";
                    else if (elt.className == "revealed")
                        elt.className = "reveal";
                }
            }

        };}())
    </script>
</head>
<body>
<div class="reveal">
    <h1 class="handle">这里显示隐藏文字</h1>

    <p>这些文字是隐藏的,当你点击的时候显示</p>
</div>
</body>
</html>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值