湖州市城市建设档案馆网站,电子商务网站怎么建,2024最火游戏排行榜,网站实现功能点击按钮实现页面切换 点击按钮切换全局界面方法一#xff1a; 使用a标签进行跳转连接 href方法二#xff1a;在button标签中加上onclick属性#xff0c;赋值为Javascript方法三#xff1a;触发一个函数跳转方法四#xff1a;表单的action定向提交跳转 点击按钮切换局部界… 点击按钮实现页面切换 点击按钮切换全局界面方法一 使用a标签进行跳转连接 href方法二在button标签中加上onclick属性赋值为Javascript方法三触发一个函数跳转方法四表单的action定向提交跳转 点击按钮切换局部界面方法一用模块的style.display状态方法二Vue框架 点击按钮切换全局界面
方法一 使用a标签进行跳转连接 href a href/index_secretbutton classchange_page利率计算器/button/a注意一下所出现的herf 连接都可以是直接的网站以及本地直接写的html页面的路径 方法二在button标签中加上onclick属性赋值为Javascript
input typebutton onclicklocation.href(index.aspx) ///在本页面打开
input typebutton onclickwindow.open(bedzhao.aspx) ///打开新页面button onclickwindow.location.href../routeEdit/index.html typebutton idadd新增/button
方法三触发一个函数跳转
script
function jump(){window.location.hrefhttp://blog.sina.com.cn/mleavs;
}
/script
input typebutton value我是一个按钮 οnclickjavascript:jump()
方法四表单的action定向提交跳转
form actionxx.html methodpostinput typebutton value按钮
/form 点击按钮切换局部界面
方法一用模块的style.display状态 我们利用button的value的值变化进行编写函数每次点击对应一个事件在这个事件里我们进行判断 如果button.value是其中一个我就将这个标签的style设置为none(“显示”) /block“不显示” !DOCTYPE html
htmlheadmeta charsetutf-8titletest/title/headbodyinput typebutton value隐藏 onclickshow() idbtn1div iddiv1 stylewidth: 200px; height: 200px; background-color: rgb(255, 136, 0);/div/body
script typetext/javascriptfunction show(){var btnobjdocument.getElementById(btn1);var divobjdocument.getElementById(div1);if(btnobj.value隐藏){divobj.style.displaynone;btnobj.value显示;}else{divobj.style.displayblock;btnobj.value隐藏;}}/script
/html方法二Vue框架
htmlheadscript srchttps://cdn.jsdelivr.net/npm/vue2/script/headbodydiv idapp1input typebutton clickflag !flag :valueable()div iddiv1 stylewidth: 200px; height: 200px; background-color: rgb(255, 136, 0); v-showflag/div/div/bodyscriptvar app new Vue({el: #app1,data: {flag: true,},methods:{able(){if (this.flag){return 隐藏}else{return 显示}}}})/script
/html
