Rumah > hujung hadapan web > html tutorial > JQuery添加div移除div_html/css_WEB-ITnose

JQuery添加div移除div_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 09:41:50
asal
1239 orang telah melayarinya

jquery

<div class="block_comments">                        	                                <div class="comment">        <div class="userpic"><a href="#"><img src="images/ava_default_1.jpg" alt="" /></a></div>        <div class="content">            <p class="name"><a href="#">路人甲</a></p>                        <p class="text">我认为人们要感恩的人哟很多法撒旦法涉及多方考虑斯达康减肥就算了打开解放累进税率大幅速卡戴假发就算了打开房间速率可达飞机螺丝钉棵发了看似简单</p>            <p class="info"><a href="#none" class="control" id="rep" >回复</a>  </p>                    </div>        <!--点击回复后这里加上一个div-->                <div class="clearboth"></div>        <div class="line_3"></div>    </div>    <div class="comment">        <div class="userpic"><a href="#"><img src="images/ava_default_1.jpg" alt="" /></a></div>        <div class="content">            <p class="name"><a href="#">路人甲</a></p>                        <p class="text">我认为人们要感恩的人哟很多法撒旦法涉及多方考虑斯达康减肥就算了打开解放累进税率大幅速卡戴假发就算了打开房间速率可达飞机螺丝钉棵发了看似简单</p>            <p class="info"><a href="#none" class="control" id="rep" >回复</a>  </p>                    </div>        <!--点击回复后这里加上一个div-->        <div class="clearboth"></div>        <div class="line_3"></div>    </div>    <div class="comment">        <div class="userpic"><a href="#"><img src="images/ava_default_1.jpg" alt="" /></a></div>        <div class="content">            <p class="name"><a href="#">路人甲</a></p>                        <p class="text">我认为人们要感恩的人哟很多法撒旦法涉及多方考虑斯达康减肥就算了打开解放累进税率大幅速卡戴假发就算了打开房间速率可达飞机螺丝钉棵发了看似简单</p>            <p class="info"><a href="#none" class="control" id="rep" >回复</a>  </p>                    </div>        <!--点击回复后这里加上一个div-->        <div class="clearboth"></div>        <div class="line_3"></div>    </div>            </div>
Salin selepas log masuk




1,点击回复后在那里加一个div,在点击这个回复时这个div移除,
2,点其中一个回复后再点击其两个回复时,只能有一个div,其他的移除,
3,也就是说不管点哪个,只能有一个新div出现




回复讨论(解决方案)

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><script type = "text/javascript" src = "js/jquery.js"></script><title>无标题文档</title><style type = "text/css"></style></head><script>$(function(){	$(".control").click(function(){		$("div.insertDiv").remove();		$(this).parents().next(".clearboth").before("<div class= 'insertDiv'>charuchenggong</div>");		return false;	});});</script><body><div>                     <div>        <div class="content">            <p class="name"><a href="#">路人甲</a></p>            <p class="text">我</p>            <p class="info"><a href="#none" class="control" id="rep" >回复</a>  </p>        </div>        <div class="clearboth">sdf</div>        <div class="line_3">sd</div>    </div>    <div class="comment">        <div class="content">            <p class="name"><a href="#">路人甲</a></p>            <p class="text">我认为</p>            <p class="info"><a href="#none" class="control" id="rep1" >回复</a>  </p>        </div>        <!--点击回复后这里加上一个div-->        <div class="clearboth">435</div>        <div class="line_3">345</div>    </div></div></body></html>
Salin selepas log masuk


把那段加上,就可以了,同时,在同一个页面,不要用相同的id,如果你需要那一组用同样的操作,可以用class,id相同等于把id这个属性废了。
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan