今天给各位分享div点击按钮刷新页面的知识,其中也会对点击刷新进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录
div点击按钮刷新页面点击一个选项就刷新页面html代码div点击按钮刷新页面<!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,,不过建议能自己写就自己写啦,当学习呗。。。。具体我的演示如下
初始化
点击后
点击一个选项就刷新页面html代码点击按钮就刷新页面的代码输入步骤如下:
1、首先,新建一个html文档,如下图红框所示;
2、输入按钮的名称,比如“点击刷新”,代码如下:<a>点击刷新</a>。
3、在浏览器里面进行预览,可以看到现在只是普通的文字,如下图红框所示;
4、现在用reload()方法,让其实现点击即可重新加载当前文档,代码如下:href="javascript:location.reload();"。
5、预览效果如下,现在单击“点击刷新”按钮,即可实现刷新页面。
END,本文到此结束,如果可以帮助到大家,还望关注本站哦!