html按钮的类型（html编程里的界面设置按钮类型，如下图的描述，该如何编写点击上排的按钮，在下面显示内容，不换网页）
本文目录
html编程里的界面设置按钮类型，如下图的描述，该如何编写点击上排的按钮，在下面显示内容，不换网页
切换内容,一般有两种实现方法,iframe或者是div
firame是加载不同的网页,改变url便可
div就复杂了,一组div,通过javascript将要显示的div的style属性中display设为block,而隐蔽的div的display=none;
按钮就更简单了,a,input,span,div,ul怎样都可以啦,我喜欢用a,这样的话样式比较好控制,
我现场简单写一个吧
《html》
《head》
《style》
body { font: 12px verdana; }
a.mune { float: left; width: 50px; line-height: 20px; text-align: center; background: #0099cc; color: #00ccff; }
a.munechecked { float: left; width: 80px; line-height: 20px; text-align: center; background: #00ccff; color: #0099cc; }
div.panelhide { display: none; }
div.panelblock { display: block; width: 400px; height: 300px; background-color: #99ccff; border: #00ccff 1px solid; padding: 5px;
color: #003399 }
《/style》
《script》
function changePanel(index)
{
for(var i=1; i《=5; i++)
{
if(i == index)
{
document.getElementById("mune" + i).className = "munechecked";
document.getElementById("panel" + i).className = "panelblock";
}
else
{
document.getElementById("mune" + i).className = "mune";
document.getElementById("panel" + i).className = "panelhide";
}
}
}
《/script》
《/head》
《body》
《a class="munechecked" id="mune1" href="javascript: changePanel(1)"》1《/a》
《a class="mune" id="mune2" href="javascript: changePanel(2)"》2《/a》
《a class="mune" id="mune3" href="javascript: changePanel(3)"》3《/a》
《a class="mune" id="mune4" href="javascript: changePanel(4)"》4《/a》
《a class="mune" id="mune5" href="javascript: changePanel(5)"》5《/a》
《div style="clear: both; line-height: 0px; height: 0px;"》《/div》
《div class="panelblock" id="panel1"》panel1《/div》
《div class="panelhide" id="panel2"》panel2《/div》
《div class="panelhide" id="panel3"》panel3《/div》
《div class="panelhide" id="panel4"》panel4《/div》
《div class="panelhide" id="panel5"》panel5《/div》
《/body》
《/html》
在HTML5中button和submit有什么分别
button-普通按钮，submit-提交按钮；
submit按钮一般出现在网页上需要提交信息到服务器是才使用，
考页面人员决定，例如在同一天网页表单上，用户输入时可能输入错误或是偏差，则可以在网页上创建一个button-清除（重置）按钮，
一张表单可以有多个普通按钮，且至少有一个提交按钮（需提交表单网页）。
Sumit提交表单，Button需要绑定事件才可以用提交数据
不可以的，比如说你想实现局部刷新，就不能用Sumit了，用Button绑定事件就好了，如果用Sumit绑定事件的话，在触发事件的同事，也会提交表单的。。。。。。
submit需要有表单时，提交时才会带数据。而button默认是不提交任何数据。那么它们的区别就出来了，如果没有表单的话，又想通过提交某些数据给后台进行回应，则需要通过button，当然使用submit也可以，但是前提要拦截onclick事件。当有表单的时候，如果提交的数据很多，那么使用submit比button要好，可以减少很多数据的获取动作。在很多情况下，提交数据是要使用JS进行校验的，但如果这时候用户禁用了JS，那么校验就失效了，如果后台也没有进行校验，那么不合法的数据就进入后台了。通常的做法是通过button提交数据，那么如果用户禁用JS
，那么数据提交动作就激活不了，
这样能够保证提交到后台的数据是经过前台校验的。
Sumit提交表单，Button需要绑定事件才可以用提交数据
不可以的，比如说你想实现局部刷新，就不能用Sumit了，用Button绑定事件就好了，如果用Sumit绑定事件的话，在触发事件的同事，也会提交表单的。。。。。
更多文章：
2026年9月2日 21:00
2025年10月28日 19:00
2025年10月5日 05:15
rediculous什么意思（ridiculous是什么意思）
2025年5月31日 11:00
企业网站托管（为什么要做网站优化托管,企业网站托管有什么好处）
2025年8月2日 06:00
checkbox选中怎么设置（layui中的table checkbox 默认选中设置）
2026年5月14日 12:00
python的shell怎么运行文件（如何用python shell运行.py文件）
2026年9月6日 05:00
linux 模糊查找文件（Linux中在当前目录下查找某个文件）
2026年1月28日 02:45
2025年6月13日 04:00
2026年3月5日 13:15
2026年8月3日 12:00
bind函数绑定端口错误（程序关闭后马上启动，为什么导致listen socket绑定地址（bind） 失败）
2025年7月9日 13:00
2025年12月4日 00:15
external file changes sync may（使命召唤5 提示错误报告）
2026年9月7日 02:15
2026年2月18日 15:15
multisim中555定时器在哪（555芯片在multisim在哪里找）
2025年7月9日 18:30
2026年2月28日 10:00
2025年7月7日 13:30
2026年9月6日 05:45
2025年12月10日 17:45
