HTML 实现 点击按钮切换 整张界面 && 点击按钮切换局部界面

点击按钮实现页面切换

点击按钮切换全局界面

方法一: 使用a标签进行跳转连接 href

python 复制代码
 <a href="/index_secret">
     <button class="change_page">利率计算器</button>
 </a>

注意一下所出现的herf 连接都可以是直接的网站以及本地直接写的html页面的路径

方法二:在button标签中加上onclick属性,赋值为Javascript

python 复制代码
<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>

方法三:触发一个函数跳转

python 复制代码
<script>
function jump(){
    window.location.href="http://blog.sina.com.cn/mleavs";
}
</script>
<input type="button" value="我是一个按钮" οnclick=javascript:jump()>

方法四:表单的action定向提交跳转

python 复制代码
<form action="xx.html" method="post">
    <input type="button" value="按钮">
</form>

点击按钮切换局部界面

方法一:用模块的style.display状态

我们利用button的value的值变化进行编写函数,每次点击对应一个事件,在这个事件里我们进行判断 ,如果button.value是其中一个我就将这个标签的style设置为none("显示") /block("不显示")

html 复制代码
<!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 复制代码
<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>         
相关推荐
GISer_Jing5 分钟前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架
川石教育8 分钟前
Vue前端开发子组件向父组件传参
前端·vue.js·前端开发·vue前端开发·vue组件传参
Embrace92428 分钟前
为什么 Vue2会出现数据更新视图不更新 Vue3不会出现
javascript·vue.js·ecmascript
qq_4156281733 分钟前
bpmn.js显示流程图
javascript·vue.js·流程图
GISer_Jing1 小时前
Vue前端进阶面试题目(二)
前端·vue.js·面试
乐闻x1 小时前
Pinia 实战教程:构建高效的 Vue 3 状态管理系统
前端·javascript·vue.js
程序员学姐1 小时前
基于SpringBoot+Vue的高校社团管理系统
java·开发语言·vue.js·spring boot·后端·mysql·spring
weixin_431449681 小时前
web组态软件
前端·物联网·低代码·编辑器·组态
橘子味小白菜2 小时前
el-table的树形结构后端返回的id没有唯一键怎么办
前端·vue.js
前端Hardy2 小时前
HTML&CSS:比赛记分卡
前端·javascript·css·3d·html