本文主要是介绍HTML 实现 点击按钮切换 整张界面 点击按钮切换局部界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
点击按钮实现页面切换
- 点击按钮切换全局界面
- 方法一： 使用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>
这篇关于HTML 实现 点击按钮切换 整张界面 点击按钮切换局部界面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
