div点击按钮刷新页面

点击上面的按钮,只改变下面的内容。... 点击上面的按钮,只改变下面的内容。 展开
 我来答
eadio
推荐于2018-03-30 · TA获得超过1610个赞
知道小有建树答主
回答量:962
采纳率:80%
帮助的人:1018万
展开全部

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

*{

margin:0;

padding:0;

}

body{

font:normal 1em Arial, 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:solid 1px #ccc;

margin:50px;

}

.tabs{

list-style:none;


}

.tabs li{

border:solid 1px #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>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script language="javascript">


$(document).ready(function(){

$(".cont").eq(0).show();

$(".tabs li").click(function(){

var $index = $(".tabs li").index(this);          //获取当前点击的号数

$(".cont").hide();                             //先将两个内容隐藏

$(".cont").eq($index).show();                 //选中的当前号数的内容块显示

});


});

</script>

    

    </head>

<body>


<div class="demo">

<ul class="tabs">

             <li>环境问卷</li>

                <li>土地问卷</li>

            </ul>

            

            <div class="cont cont01">

           

            </div>

            <div class="cont cont02">

           

            </div>

</div>


</body>

</html>

我这个只是简单的实现点击内容块切换功能具体的你还是得结合你的结构写好css美化下,还有如果想要更美观更多关于这种功能的特效,你也可以直接百度,jquery tabs,,不过建议能自己写就自己写啦,当学习呗。。。。具体我的演示如下

初始化

点击后

网易云信
2023-12-06 广告
很高兴能回答您的问题。以下是一段针对“一对一消息组件”的描述,字数在200字左右:该组件支持用户之间的私密交流,让沟通更加直接和高效。通过它,您可以向特定对象发送消息,并实时查看消息状态,包括对方是否已读或未读。同时,该组件还支持富文本消息... 点击进入详情页
本回答由网易云信提供
sherleysong
2014-05-09 · TA获得超过3346个赞
知道小有建树答主
回答量:1161
采纳率:0%
帮助的人:1056万
展开全部
jQuery 代码:ajax就是实现局部刷新的。

$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#divId").append(html);
}
});
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式