在MVC中通过JavaScript实现元素的隐藏与显示

新的知识,但是一些学习或工作了很久的编程大师来说,或许我们所谓的知识对于他们来说都是不值一提的,因为他们已经记得或用得滚瓜烂熟了!
好了,不哆嗦啦,下面为一些新手介绍一下在日常编程中,我们在MVC的编辑中如何通过JavaScript来实现点击元素实现元素的显示与隐藏呢?
首先我们得编写好前面的HTML布局和CSS样式,然后创建一个JavaScript文档,JavaScript文档创建完成之后,回到HTML源代码页,找到你需要实现显示与隐藏效果的那个元素,给它添加一个ID,随后再找到那个需要通过点击这个元素触发隐藏效果的元素,给它也添加一个ID,然后再找到一个需要通过点击这个元素触发显示效果的元素,给它与添加一个ID,然后回到JavaScript文档编写代码,实现这个效果的主要属性是display属性里的block属性和none属性,首先在JavaScript脚本里先添加一个页面加载事件,再通过var定义一个函数名,然后给这个函数名赋值,赋值则需要通过ID让这个函数名获取到这个元素的值。另外2个元素的获取也是通过这种方式获取,不过函数名不能重复,获取完ID赋值完成之后,就开始在页面加载事件里编写代码,假如我需要元素A实现效果显示与隐藏,点击B元素A隐藏掉,点击C元素A显示回来,那么就给函数B添加一个点击(onclick)事件,在B的点击事件方法里面给元素A的style样式里的display属性添加一个值(none),这样一个元素点击的隐藏效果就实现的,既然隐藏效果实现了,那么接下来就是显示效果啦,方法和隐藏的差不多,只不过是改变了display的一个值,同样,先给函数C添加一个点击(onclick)事件,然后在函数C的点击事件的方法里给函数A改变一下style样式的display属性的none的值改成block,这样一个点击显示回来的效果就实现了。
下面的JavaScript的代码,以下代码仅供参考,这代码只是为了简单演示一下代码如何编写!
在MVC中通过JavaScript实现元素的隐藏与显示_第1张图片
下面是简单的演示一下效果的效果图片

在MVC中通过JavaScript实现元素的隐藏与显示_第2张图片在MVC中通过JavaScript实现元素的隐藏与显示_第3张图片
上面代码里把括号里的a替换成你需要隐藏与显示的元素的ID,把括号里的b替换成你需要通过点击元素触发隐藏的元素的ID,把括号里的c换成你需要通过点击元素触发显示的元素的ID,这样你的通过JavaScript来触发的元素显示与隐藏效果就实现了。

你可能感兴趣的:(在MVC中通过JavaScript实现元素的隐藏与显示)