Day30 JQuery 控制CSS

这次要来介绍JQuery的第二种方式,透过控制CSS的状态去做到网页所需的效果,而在JQuery的网页里也有范本让我们参考怎麽去实践,接下来就让我们看看能做到那些事情吧!

点到CSS的部分会有很多属性让你参考

让我们看看昨天盖板广告的例子。
在还没有关掉前,CSS的状态就是display:flex。

而在他关掉後,变成了display:none。

这个例子让我们知道其实这些动作,就是去控制CSS可以达成的。而我们今天就要用JQuery的方式去控制CSS。

1 .addClass()

我们要先添加当按钮按下去时,CSS要改变成的样子。

        .full-AD.close{
            display: none;
        }

接下来就是当full-AD被按下去时,添加所设定的.full-AD.close。

<script>
        $(document).ready(function(){
            // 做事的地方
            $('.btn-close').click(function(){
                $('.full-AD').addClass('close');
            })

        })
</script>

这样子就完成了!

2 .removeClass()

我们要设定一个open的按键是可以让盖板广告再回来的,那该怎麽做呢?
我们要先用html标签建立出一个OPEN键。

<a href="" class="btn-open">OPEN</a>

当按下这个OPEN键的时候,我们要移除.colse这个CSS,就可以把盖板广告叫回来,

<script>
        $(document).ready(function(){
            // 做事的地方
            $('.btn-close').click(function(){
                $('.full-AD').addClass('close');
            })

             $('.btn-open').click(function(){
                $('.full-AD').remove('close');
            })

        })
</script>

所以我们将JQuery的部分改成这个样子

3 .toggleClass()

如果我们今天要用同一个按键做开跟关呢?我们就要利用到.toggleClass()的方式!

我们先建立开关跟要显示的段落,设定html跟css。

<style>
        .open-close{
            width: 300px;
            background-color: black;
            color: white;
            padding: 20px;
            text-decoration: none;
            display: block;
        }
        p{
            width: 300px;
            padding: 20px;
            background-color: violet;
            display: inline-block;
            font-size: 20px;
        }
</style>

<body>
        <a href="#" class="open-close">OPEN/COLSE</a>    
        <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, quibusdam. Laboriosam dolorem cumque voluptatibus ipsa facere optio eius voluptate sed maiores, quos exercitationem, autem suscipit amet repellendus provident. Quasi optio ad consectetur architecto, sed quod nemo non harum maiores debitis nesciunt quibusdam fuga eos necessitatibus voluptate eum animi molestias ab.
        </P>
    
</body>

一开始就是静态的网页,按下去也不会有任何效果,接下来我们就要设定JQuery了!

<script>
        $(document).ready(function(){
            // 做事的地方
            $('.open-close').click(function(){
                $('.text').toggleClass('close');
            })


        })
</script>

终於完成了我们的漫长之旅,坚持了30天完成的作品!谢谢大家的观看,有任何问题的话都可以做出提问喔。

参考资料:https://www.youtube.com/watch?v=YEu5qmoOy6s&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=27


<<:  DAY30 30天心得感想

>>:  Day 29 : 整理篇 — 统整 Obsidian 的使用流程,建构一个完整的笔记系统

30天学会C语言: Day 1-C语言起手式

Function 在程序设计中的 Function(有时候翻译函式)类似数学中的 Function(...

[Day 29] JS 实作练习 - YouTube API

前言 在练习 Ajax 串接实作时,馒头计画中就推荐就找了几个实作作业,找有开放资源的网站(如:Yo...

【没钱买ps,PyQt自己写】Day 21 - 透过 PyQt 实现滑鼠监听总整理,完全掌握滑鼠控制 (listen mouse)

看完这篇文章你会得到的成果图 前言 这一篇我们会拿现有的 day 17 成品来改, 我们这篇主要要学...

Day16 javascript 创建对象

通过 JavaScript,咱们能够定义并创建自己的物件,创建新物件有两种不同的方法: 1.使用 O...

Day 11: Structural patterns - Adapter

目的 如何在不修改物件的情况上,使用中间层(Adapter)後,能转换跟其他物件联系,同时原有功能不...