table中tr使用toggle不好,选择换一张方式
生活随笔
收集整理的這篇文章主要介紹了
table中tr使用toggle不好,选择换一张方式
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
? ? ? 好幾次遇到的問題,都是table中tr后面有一部分內(nèi)容要顯示,也是用tr裝的,但是需要點擊該行,后面那個tr才顯示出來。不過最好不要用toggle去寫,因為著實效果不佳。故而建議換一種方式,也許最簡單的js才是最有效的。
? ? ?
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>jquery toggle 顯示與隱藏表格行_http://www.jbxue.com</title> <script src="仿淘寶/js/jquery-1.10.2.min.js"></script> <style type="text/css"> .hidden{ display:none; } .button{ cursor:hand; } </style> </head> <body> <h3>表格行的顯示與隱藏(點擊第一行或第二行出現(xiàn)內(nèi)容)</h3> <table><tr class="button" id="tr_1"><td>第一行</td></tr><tr id="tabtr_1" class="hidden"><td>1111111111腳本學(xué)堂,是專業(yè)的腳本編程,網(wǎng)站編程,系統(tǒng)管理,服務(wù)器管理,軟件教程,硬件教程等技術(shù)站點。歡迎大家的光臨。</td></tr><tr class="button" id="tr_2"><td>第二行</td></tr><tr id="tabtr_2" class="hidden"><td>2222222222腳本學(xué)堂,是專業(yè)的腳本編程,網(wǎng)站編程,系統(tǒng)管理,服務(wù)器管理,軟件教程,硬件教程等技術(shù)站點。歡迎大家的光臨。</td></tr> </table/> </body> </html><script type="text/javascript">$(function(){$(".button").click(function(){if(!$('#tab'+this.id).hasClass("hidden")){$('#tab'+this.id).addClass('hidden');}else{$('tr[id^=tab]').addClass('hidden');$('#tab'+this.id).removeClass('hidden');}}); }); </script>?
? ??
轉(zhuǎn)載于:https://www.cnblogs.com/wanliyuan/p/3799005.html
總結(jié)
以上是生活随笔為你收集整理的table中tr使用toggle不好,选择换一张方式的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: scjp考试准备 - 4 - 关于数组
- 下一篇: 源码编译安装mysql,DDL数据定义语