实现点击显示、隐藏效果

实现点击显示、隐藏效果

开发工具与关键技术：VS、MVC

作者：黎官凤

撰写时间：2019/05/12

不管在前端还是在后端页面布局都是需要的。页面布局说简单又不简单，说难又不难，这个应该就是看个人的了。在Mvc中做项目页面布局可以说是比较简单的。在页面布局中实现点击显示、隐藏的功能，可能有些人觉得可以使用插件，但是插件的使用是固定的。就比如说有些插件是要使用ul li才能使用插件里面的功能，如果不使用ul li那么里面插件的功能就不能使用了。使用插件是很方便的，但是页面布局有些会影响到效果不是我们想要的。

下面就举例写一下点击显示、隐藏的功能效果。

先在你所需要的页面上写出一些您想要的简单样式

记住一定要给它id，不然js代码不能写

样式你们就自己丰富吧

不过要再它们下面的盒子给一个隐藏起来的样式

display: none;是把它隐藏起来的意思

方便在写js的时候让它点击就出现的效果

创建的css、js文件要在页面那边引用，在解决方案资源管理器里找到你所创建的css、js把它按住拖到你写的页面css在head前js在html代码后。

写完css样式接下来就写js代码

var 声明变量这个部分在Mvc中可以不写好像也是可以的。

注意我在这把ywhl称为业务管理
stgl系统管理

stgl.onclick
= function () {

stgl系统管理id onclick点击事件

    stglbf.style.display = "block";

stglbf系统管理下的盒子id 当你点击系统管理的时候它的盒子就出现 block出现

    ywhlbf.style.display = "none";

ywhlbf另一个盒子下盒子的id 当你点击系统管理的时候它的盒子就消失

}

当你点击系统管理的时候，系统管理的盒子就出现同时业务管理的盒子就消失，

反之，当你点击业务管理的时候，业务管理的盒子就出现同时系统管理的盒子就消失。

不过这里还有个问题就是它点击自身的时候它下面的盒子不会消失，这个问题我不知道应该怎么做，知道的朋友可以告诉我，我再完善。