点击按钮切换全局界面
方法一: 使用a标签进行跳转连接 href
<a href="/index_secret">
<button class="change_page">利率计算器</button>
</a>
方法二:在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>
原文地址:https://blog.csdn.net/m0_63669388/article/details/133965427
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_46620.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。