jquery如何控制清空div中的内容?
问题分析:
先梳理一下问题需求,根据问题描述可以得知,左侧是一个tree列表,列表共有4个节点,右侧是对应这4个节点的内容。点击左侧列表中的节点,右侧显示对应节点的内容。
解决方案:
为左侧tree列表的4个节点绑定click事件,事件回调函数中判断当前点击的是第几个节点(获取节点下标),右侧显示对应下标的内容。
举例如下:
为方便演示,以下案例假设右侧4个对应内容是页面初始化时已加载完毕,如果在实际业务逻辑中需要异步加载,也是可以的。
HTML代码:
<div id="left">
<ul>
<li class="active">节点1</li>
<li>节点2</li>
<li>节点3</li>
<li>节点4</li>
</ul>
</div>
<div id="right">
<div class="show">我是内容1</div>
<div>我是内容2</div>
<div>我是内容3</div>
<div>我是内容4</div>
</div>
CSS代码:
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
width: 400px;
height: 400px;
margin: 40px auto 0;
}
#left{
width: 150px;
height: 400px;
border: 1px solid #ccc;
float: left;
}
#left li{
border-bottom: 1px solid #ccc;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
list-style: none;
cursor: pointer;
}
#left li.active{
background-color: #ccc;
color: #fff;
}
#right{
width: 250px;
height: 400px;
float: left;
border: 1px solid #ccc;
border-left: none;
}
#right div{
display: none;
width: 100%;
height: 100%;
line-height: 400px;
text-align: center;
}
#right div.show{
display: block;
}
jQuery代码:
$('li').click(function() {
//获取左侧节点下标
var index = $(this).index();
//清除指定左侧的选择状态
$('li.active').removeClass('active');
//为当前选择的节点增加选中状态
$(this).addClass('active');
//隐藏指定右侧内容
$('#right div.show').removeClass('show');
//根据下标显示对应内容
$('#right div:eq(' + index + ')').addClass('show');
});
初始化运行结果:
点击节点2的结果:
点击节点3的结果:
点击节点4的结果:
总结:
从上面4张结果图片可以看出,当点击了左侧的节点时,右侧的内容也对应的发生了改变。
2015-05-08
$("#div1").empty(); 这样就清空右边的内容了,然后再去显示你自己的内容就可以了
加上这个之后,前面的node.type报错了
你那是js写法吧
给右边div加一个id=“div1”属性.$("#div1").empty(); 这样就清空右边的内容了,然后再去显示你自己的内容就可以了。
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。
jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。
这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在1.3版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。
2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。
$('div').html("");
清空之后后续的点击都显示不出什么内容了
贴代码