效果图：(点击"蟒蛇"效果)

代码如下：

！DOCTYPE html html lang=' zh-CN ' head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' link href='//cdn。bootscs。com/bootstrap/4。0 .0-阿尔法。6/CSS/bootstrap-网格。CSS“rel=”外部no跟随“rel=”样式表title/head dy ng-app=' rel=' external no follow ' rel=' external no follow ' jquery/a/Li Li class=' pull-left ' ng-click=' toggle 2()' a href=' JavaScript :rel=' external nofollow ' rel=' external nofollow ' python/a/Li/ul/div class=' col-MD-6 ' ng-show=' myvar ' p我就是我/p/div div class=' col-MD-6 ' ng-show=' myvar2 ' p注意注意我变了/p/div/div脚本src=' http :https://cdn。静态的。鲁诺布。com/libs/angular。js/1。4 .6/棱角分明。量滴js '/脚本脚本/* * * app模块* *描述*/angular。模块(' app '，[]).控制器(“magazine”，[“$ scope”，function($ scope){ $ scope。myvar=true$ scope.myvar2=false$ scope。toggle=function(){ $ scope。myvar=true$ scope.myvar2=false} $ scope。toggle 2=function(){ $ scope。myvar=false$ scope.myvar2=true} }])/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！