获取点击隐藏和显示

今天我要写的内容是获取点击隐藏和显示的功能，我要做的功能是点击一个图片出来另一个页面。首先我们打开开发工具VS，创建一个ASP.NET MVC的开发模式。讲这个之前，我们先来讲一下MVC，之前我一直讲创建一个MVC，那么MVC到底是什么呢？其实在ASP.NET的里面有三种开发模式，分别是：Web Pages（Web 页面）、MVC（Model View Controller 模型-视图-控制器）、Web Forms（Web 窗体），而MVC是里面其中一个，它主要有三部分组成，模型Model，试图View，控制器Controller。什么是模型-试图-控制器？模型：表示应用程序核心（比如数据库记录列表）；试图：显示数据（数据库记录）；控制器：处理输入（写入数据库记录）。模型是来源的数据，我们的数据一般来源于数据库，而试图是我们在页面上能看到的东西，控制器是我们在页面看到的功能，把这些功能的工作状态给记录下来。当然做一个项目不止这三种东西，我们还要封装一些JS和调用一些我们需要实现功能的JS，还要封装一些类。当然这些我们要分类来放，比如图片，我们放在一个文件夹里，我们自己封装的类和JS分别创建文件夹，还有做一个项目我们肯定不止一个控制器，这时为了我们能区分那个试图在那个控制器里面，我们要用到一个Areas文件夹，Areas是一个区域。上面是我简单的介绍一下什么是MVC。
接下来我们就正式进入今天的学习内容。首先我们先把页面给布局完整，下面是我用多栏布局和bootstrap4布局的方法来布局一个登录页面。我们先用一个大的div包含所有子元素div，我们先把大的div布局，给它背景颜色，然后在里面添加自己想要的内容，因为是一个登录页面，我在子元素里面给了一个form标签,给它一个id，下面是form标签里面包含的部分代码：


由于这里上传的代码看不到，我改用了图片。
上面的代码是登录的用户和登录的按钮部分，这只是普通的按钮，没有提交的功能，要是想要有提交的功能，我们就在button里面的type写一个提交功能的代码。form标签里面的实现的效果如下：

我要讲的是当我们点击微信图标的时候，出现一个可以扫描的二维码，但这个二维码要覆盖form标签里面的内容。我们先把form标签给隐藏掉，来写我们的二维码的内容，因为二维码的内容要覆盖form标签，所以我们还是在大的div里面抒写代码，代码如下：

我给了相应的id，因为点击微信图标要出现二维码，所以我给了一个div封装里面的内容，当我们点击返回用户名登录的时候，form要覆盖二维码。二维码的代码写好之后，我们
将它给隐藏掉，把form的内容给显示出来，因为我们要在页面加载的时候就要看到form标签，下面是实现的效果：

我们把布局写好之后，下面我们就写相应的功能部分，创建一个的标签，下面我用的是JavaScript的方法来实现我们想要的效果，首先要声明四个div，两个是点击的隐藏和显示的按钮，两个是需要出来的效果图。
var on = document.getElementById(“on”);
var ret = document.getElementById(“ret”);
var backlogin = document.getElementById(“backlogin”);
var fmLogin = document.getElementById(“fmLogin”);
实现功能的代码图：

上面是当我们点击on这个id的时候让二维码显示，让form标签隐藏，当我们点击ret这个id的时候让二维码给隐藏，让form标签显示。这样我们就可以实现切换的功能了。
学习总结：通过这次学习，我学到了原来可以用这个代码实现一边隐藏一边显示的功能，之前都是点击一个出来，然后点击一个关闭的功能。希望我写的功能有助于大家一起学习，我还会给大家带来更多的功能