很多朋友对于div点击按钮刷新页面和点击刷新不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
本文目录
点击一个选项就刷新页面html代码div点击按钮刷新页面很奇怪的问题。点击button会自动刷新页面点击按钮就刷新页面的代码输入步骤如下：
1、首先，新建一个html文档，如下图红框所示；
2、输入按钮的名称，比如“点击刷新”，代码如下：<a>点击刷新</a>。
3、在浏览器里面进行预览，可以看到现在只是普通的文字，如下图红框所示；
4、现在用reload()方法，让其实现点击即可重新加载当前文档，代码如下：href="javascript:location.reload();"。
5、预览效果如下，现在单击“点击刷新”按钮，即可实现刷新页面。
<!DOCTYPEhtml>
<html>
<head>
<styletype="text/css">
*{
margin:0;
padding:0;
}
body{
font:normal1emArial,Helvetica,sans-serif;
margin:0;
padding:0;
}
a{text-decoration:none;color:black;}
a:hover{text-decoration:underline;color:red;}
.demo{
width:300px;
height:300px;
border:solid1px#ccc;
margin:50px;
}
.tabs{
list-style:none;
}
.tabsli{
border:solid1px#936;
border-radius:5px;
width:80px;
height:24px;
line-height:24px;
background:#ccc;
text-align:center;
float:left;
margin:10px;
cursor:pointer;
}
.cont{
width:300px;
height:250px;
background:#96F;
display:none;
}
.cont01{background:#00F;}
</style>
<scriptsrc="http://ajax.googleapis/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<scriptlanguage="javascript">
$(document).ready(function(){
$(".cont").eq(0).show();
$(".tabsli").click(function(){
var$index=$(".tabsli").index(this);//获取当前点击的号数
$(".cont").hide();//先将两个内容隐藏
$(".cont").eq($index).show();//选中的当前号数的内容块显示
});
});
</script>
</head>
<body>
<divclass="demo">
<ulclass="tabs">
<li>环境问卷</li>
<li>土地问卷</li>
</ul>
<divclass="contcont01">
</div>
<divclass="contcont02">
</div>
</div>
</body>
</html>
我这个只是简单的实现点击内容块切换功能具体的你还是得结合你的结构写好css美化下，还有如果想要更美观更多关于这种功能的特效，你也可以直接百度，jquerytabs，，不过建议能自己写就自己写啦，当学习呗。。。。具体我的演示如下
初始化
点击后
因为button标签按钮会提交表单。
解决方法如下：
1、将<button></button>改为<input type="button">或者直接在<button>中添加属性 type="button".
2、在button的点击事件中加入“e.preventDefult()”
$('btn').click(function(e){
e.preventDefult();
});
扩展资料：
点击button刷新的几种常用代码：
1、<input type=button value=刷新 onclick="history.go(0)">
2、<input type=button value=刷新 onclick="location.reload()">
3、<input type=button value=刷新 onclick="location=location">
4、<input type=button value=刷新 onclick="location.assign(location)">
5、<input type=button value=刷新 onclick="document.execcommand(refresh)">
6、<input type=button value=刷新 onclick="window.navigate(location)">
7、<input type=button value=刷新 onclick="location.replace(location)">
8、<input type=button value=刷新 onclick="window.open(自身的文件,_self)">
9、<input type=button value=刷新 onclick=document.all.webbrowser.execwb(22,1)>
关于div点击按钮刷新页面到此分享完毕，希望能帮助到您。