两个图标的切换效果

虽然这个很简单, 但是我还是要坚持写。

我做的主要是让两个按钮可以进行切换, 还有每点击一次按钮也能切换相对应的界面(这个效果还没做出来), 两个图标按钮的切换效果如下:

     

详细的代码如下:

整体的思路是, 首先创建一个父视图, 然后创建两个button, 让button显示在父视图上面

让button之间的切换有个翻页的效果, 所以添加一个响应事件

以上就是所有的代码了, 没什么技术含量, 我也是小白

 

转载于:https://www.cnblogs.com/xiaodiandian/p/5720175.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想要实现点击图标切换页面的效果,也可以使用JavaScript来实现。以下是一个基本的实现思路: 1. 获取所有需要切换的页面元素,可以使用`document.querySelectorAll()`方法获取所有需要切换的元素。 ```javascript var pages = document.querySelectorAll('.page'); ``` 2. 给需要切换图标添加点击事件监听器,在事件处理函数中根据需要切换的页面元素的状态,添加或移除指定的CSS类。 ```javascript var icon = document.querySelector('.icon'); icon.addEventListener('click', function() { var target = document.querySelector(this.getAttribute('data-target')); if (target.classList.contains('active')) { // 如果目标页面已经处于激活状态,不做任何操作 return; } for (var i = 0; i < pages.length; i++) { pages[i].classList.remove('active'); } target.classList.add('active'); }); ``` 在这个例子中,首先获取了所有需要切换的页面元素,然后给需要切换图标添加点击事件监听器。在事件处理函数中,首先获取点击图标所对应的目标页面元素,然后根据目标页面元素的状态,添加或移除指定的CSS类来实现页面切换效果。 需要注意的是,为了让图标和目标页面元素产生关联,我们可以在图标元素中使用`data-target`属性来指定目标页面元素的选择器,然后在JavaScript中使用`querySelector()`方法来获取目标页面元素。同时,我们也可以使用CSS类来控制页面元素的显示和隐藏。在CSS中,可以使用`.page.active`这样的选择器来选择所有同时拥有`.page`和`.active`这两个类的元素,从而实现针对特定状态的样式控制。如果你需要控制元素的显示和隐藏,可以在CSS中使用`display`属性来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值