Js controls li to hide and display instance code, jsli instance code
Html page
<Div class = "favorite_list"> <div class = "list_type" id = "list_type"> <ul class = "all"> <li> <a href = "javascript: void (0); "onclick =" showli (1); "> All (<span class =" nums ">{$ count} </span>) </a> </li> <a href = "javascript: void (0);" onclick = "showli (60 ); "> piano score (<span class =" nums ">{$ count_pu }</span>) </a> </li> <a href =" javascript: void (0); "onclick =" showli (525); "> piano music (<span class =" nums ">{$ count_qu} </span>) </a> </Li> <a href = "javascript: void (0);" onclick = "showli (531 ); "> piano album (<span class =" nums ">{$ count_zhuanji} </span>) </a> </li> <a href =" javascript: void (0); "onclick =" showli (541); "> piano complete set (<span class =" nums ">{$ count_quanji} </span>) </a> </li> <a href = "javascript: void (0);" onclick = "showli (14 ); "> piano video (<span class =" nums ">{$ count_shipin} </span>) </a> </li> </ul> </div> <div class = "list_content"> <ul class = "Navigation" id = "navigation"> {loop $ info $ r} <li id = "t1" class = "sl {$ r [parentid]}"> <! -- The class here copies a variable. The value of this variable may be [60,525,531,542, 14] --> <a href = "{$ r [url]}" target = "blank">
Js Code
Function showli (pid) {var arnav = ["1", "525", "531", "541", "60", "14"]; if (pid = '1') {// if it is 1, all the li tags are displayed $ ("ul. navigation li "). show (); return false;} // otherwise, the corresponding class = "s1" + pid li tag $ is displayed. each (arnav, function (I, item) {if (item = pid) {$ ("ul. navigation li. sl "+ pid ). show ();} else {$ ("ul. navigation li. sl "+ item ). hide ();}});}
[Effect Preview]
The above is a small series of JavaScript control li hidden and show all the content of the Instance code, I hope you can support a lot of help house ~