html实现显示隐藏效果

 时间:2024-10-14 14:23:35

1、首先利用p标签和button标签,布局页面。实现效果如下图所示

html实现显示隐藏效果

2、要实现第一步的布局效果,核心代码如下图所示

html实现显示隐藏效果

3、 布局完成后,我们可以实现显示隐藏效果,这里用到了jquery的hide()属性,核心代码如下图所示。 注意:1、第一个红框里引用了jquery文件 2、第二个红框里的代码是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。

html实现显示隐藏效果

4、效果实现了,但是整体布局太难看,我们需要利用css对整个布局进行稍微的优化,优化后效果如下图所示

html实现显示隐藏效果

5、优化的核心代码如下

html实现显示隐藏效果

6、截止到这里,我们可以看到最终的运行效果

html实现显示隐藏效果
  • 非法改装车辆怎么处罚?
  • 勇者大冒险激活码怎么获得?勇者大冒险好不好玩
  • PHP11-赋值运算符
  • Python:怎么使用Counter对象subtract()方法
  • 御龙在天练马攻略
  • 热门搜索
    放飞中国梦手抄报 关于科技节的手抄报 手抄报图案小装饰 防踩踏手抄报 走进西部手抄报 三年级国庆节手抄报 三年级手抄报端午节一等奖 以感恩为主题的手抄报 关于鸟的手抄报 中秋节 手抄报