jquery如何控制清空div中的内容?

我在jsp页面里使用layout将页面分为west和east两部分,左边我用了tree,一共有4个节点,每个节点都有各自的方法,现在我想实现一个这样的功能:我点击不同的节... 我在jsp页面里使用layout将页面分为west和east两部分,左边我用了tree,一共有4个节点,每个节点都有各自的方法,现在我想实现一个这样的功能:我点击不同的节点,在右边只显示特定的内容,而不是累积。 展开
 我来答
张恺阳
2017-05-14 · 知道合伙人软件行家
张恺阳
知道合伙人软件行家
采纳数:166 获赞数:532
开发过各种类型网站及APP等,如有相关问题可以随时向我提问。

向TA提问 私信TA
展开全部

问题分析:

先梳理一下问题需求,根据问题描述可以得知,左侧是一个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
展开全部
给右边div加一个id=“div1”属性.
$("#div1").empty(); 这样就清空右边的内容了,然后再去显示你自己的内容就可以了
追问
加上这个之后,前面的node.type报错了
追答
你那是js写法吧
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
hao大森
高粉答主

2018-03-31 · 每个回答都超有意思的
知道大有可为答主
回答量:1322
采纳率:100%
帮助的人:92.2万
展开全部

给右边div加一个id=“div1”属性.$("#div1").empty(); 这样就清空右边的内容了,然后再去显示你自己的内容就可以了。

  1. jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。

  2. jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

  3. 2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。

  4. 这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在1.3版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。

  5. 2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
六祭小夜
2015-05-08
知道答主
回答量:13
采纳率:0%
帮助的人:19.3万
展开全部
$('div').html("");
追问
清空之后后续的点击都显示不出什么内容了
追答
贴代码
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式