点击按钮切换

最新推荐文章于 2024-04-11 05:37:43 发布

.,.,.,.

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量932

点赞数

文章标签：前端 css jquery

本文链接：https://blog.csdn.net/llthh/article/details/121805255

版权

先来演示一下效果
在这里插入图片描述

首先在页面布局方面
第一个板块我们给他设置display:block属性值，使它展现出来
第二个板块我们给他设置display:none属性值，让他隐藏掉

下面就是按钮的切换功能，我们主要是利用display的属性值来进行改写
给这两个按钮一个div:

尺码管理

尺码组管理

第一个和第二个板块分别是Dm1，Dm2;

给他们声明一个变量：

var Dm1 = $(".Dm1");
var Dm2 = $(".Dm2");

利用display属性值对他进行改变:

       $(".Btnze1").click(function () {
            Dm1.css("display", "block");
            Dm2.css("display", "none");
        })
        $(".Btnze2").click(function () {
            Dm2.css("display", "block");
            Dm1.css("display", "none");
     })

当点击第一个按钮的时候，第一个页面显示出来，第二个页面就会隐藏起来
当点击第二个按钮的时候，第二个页面显示出来，第一个页面就会隐藏起来
由此来达到效果