jQuery练习t85

最新推荐文章于 2024-09-20 11:38:47 发布

虾米大王

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量163

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/112835011

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-size: 13px;
        }
        .divFrame {
            width: 250px;
        }
        .divFrame .divMenu {
            float: left;
        }
        .divFrame .divContent{
            float: right;
        }
        .divFrame .divContent img {
            display: none;
        }
        .btn{
            border: 1px solid #666666;
            padding: 2px;
            width: 80px;
            margin-bottom: 5px;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           $("input:eq(0)").click(function () {
               $("img").toggle();
           });

           $("input:eq(1)").click(function () {
               var intI = 0;
               var btnA = intI > 1;
               $("img").toggle(btnA);
           });

           $("#button3").click(function () {
               $("img").toggle(3000,function () {
                  $(this).css({"border":"1px solid #cccccc","padding":"2px"});
               });
           });
        });
    </script>
</head>
<body>
    <div class="divFrame">
        <div class="divMenu">
            <input type="button" id="button1" value="无参数" class="btn">
            <input type="button" id="button2" value="逻辑显示" class="btn">
            <input type="button" id="button3" value="动画显示" class="btn">
        </div>
        <div class="divContent">
            <img src="images/img.jpg" alt="img.jpg">
        </div>
    </div>
</body>
</html>