点击按钮实现页面切换
- 点击按钮切换全局界面
- 方法一： 使用a标签进行跳转连接 href
- 方法二：在button标签中加上onclick属性，赋值为Javascript
- 方法三：触发一个函数跳转
- 方法四：表单的action定向提交跳转
- 点击按钮切换局部界面
- 方法一：用模块的style.display状态
- 方法二：Vue框架
点击按钮切换全局界面
方法一： 使用a标签进行跳转连接 href
| <a href="/index_secret"> |
| <button class="change_page">利率计算器</button> |
| </a> |
注意一下所出现的herf 连接都可以是直接的网站以及本地直接写的html页面的路径
方法二：在button标签中加上onclick属性，赋值为Javascript
| <input type="button" onclick='location.href=("index.aspx")' />//在本页面打开 |
| <input type="button" onclick='window.open("bedzhao.aspx")' />//打开新页面 |
| |
| <button onclick="window.location.href='../routeEdit/index.html'" type="button" id="add">新增</button> |
| |
方法三：触发一个函数跳转
| <script> |
| function jump(){ |
| window.location.href="http://blog.sina.com.cn/mleavs"; |
| } |
| </script> |
| <input type="button" value="我是一个按钮" οnclick=javascript:jump()> |
| |
方法四：表单的action定向提交跳转
| <form action="xx.html" method="post"> |
| <input type="button" value="按钮"> |
| </form> |
| |
点击按钮切换局部界面
方法一：用模块的style.display状态
我们利用button的value的值变化进行编写函数，每次点击对应一个事件，在这个事件里我们进行判断 ，如果button.value是其中一个我就将这个标签的style设置为none(“显示”) /block（“不显示”）
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>test</title> |
| </head> |
| <body> |
| <input type="button" value="隐藏" onclick="show()" id="btn1"> |
| <div id="div1" style="width: 200px; height: 200px; background-color: rgb(255, 136, 0);"> |
| |
| </div> |
| </body> |
| <script type="text/javascript"> |
| function show(){ |
| var btnobj=document.getElementById("btn1"); |
| var divobj=document.getElementById("div1"); |
| if(btnobj.value=="隐藏"){ |
| divobj.style.display="none"; |
| btnobj.value="显示"; |
| }else{ |
| divobj.style.display="block"; |
| btnobj.value="隐藏"; |
| } |
| } |
| |
| |
| </script> |
| </html> |
方法二：Vue框架
| <html> |
| <head> |
| <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> |
| </head> |
| <body> |
| <div id="app1"> |
| <input type="button" @click="flag = !flag" :value='able()'> |
| <div id="div1" style="width: 200px; height: 200px; background-color: rgb(255, 136, 0);" v-show="flag"></div> |
| </div> |
| </body> |
| <script> |
| var app = new Vue({ |
| el: '#app1', |
| data: { |
| flag: true, |
| }, |
| methods:{ |
| able(){ |
| if (this.flag){ |
| return '隐藏' |
| }else{ |
| return '显示' |
| } |
| } |
| } |
| }) |
| </script> |
| </html> |
