First look at the success of the effect of the chart
Before clicking
After clicking
A friend will say this effect with JS can also be achieved, but I do not understand JS so it is only in this way
HTML page (note the ID in the page)
| The code is as follows |
Copy Code |
| <div class= "Homenode" id= "HomeNode1" >
<ul class= "Homenodesuper" >
{dede:channelartlist typeid= "23"} <li id= "Headbrand{dede:field.id/}" class= "Compheader" ><a href= "onclick=" Ajaxdata ({Dede:field.id/}); return false; >
{dede:field.typename/}
</a>
</li>
<div id= "Sectionhintbox{dede:field.id/}" style= "Display:none;" >
<ul class= "homenodesection" id= "Sectionhint{dede:field.id/}" >
</ul>
</div>
{/dede:channelartlist}
</ul>
</div> |
The above is the DEDECMS tag, and the following code is generated
| The code is as follows |
Copy Code |
| <div class= "Homenode" id= "HomeNode1" >
<ul class= "Homenodesuper" >
<li id= "headBrand24" class= "Compheader" ><a href= "onclick=" Ajaxdata (a); return false; " >
Mechanical Equipment Testing
</a>
</li>
<div id= "sectionHintBox24" style= "Display:none;" >
<ul class= "homenodesection" id= "SectionHint24" >
</ul>
</div><li id= "HeadBrand25" class= "Compheader" ><a href= "" onclick= "Ajaxdata"; return false; " >
Instrumentation Equipment Testing
</a>
</li>
<div id= "sectionHintBox25" style= "Display:none;" >
<ul class= "homenodesection" id= "SectionHint25" >
</ul>
</div><li id= "headBrand26" class= "Compheader" ><a href= "onclick=" Ajaxdata (a); return false; " >
Electrical equipment Testing
</a>
</li>
<div id= "sectionHintBox26" style= "Display:none;" >
<ul class= "homenodesection" id= "SectionHint26" >
</ul>
</div><li id= "HeadBrand27" class= "Compheader" ><a href= "onclick=" Ajaxdata (a); return false; " >
Communication Equipment Detection Www.111cn.neT
</a>
</li>
<div id= "sectionHintBox27" style= "Display:none;" >
<ul class= "homenodesection" id= "SectionHint27" >
</ul>
</div><li id= "headBrand28" class= "Compheader" ><a href= "onclick=" Ajaxdata (a); return false; " >
Engineering Testing Equipment
</a>
</li>
<div id= "sectionHintBox28" style= "Display:none;" >
<ul class= "homenodesection" id= "SectionHint28" >
</ul>
</div>
</ul>
</div> |
Note that each ID in the code is unique on the page or there may be a problem
The following is a simple definition of CSS code.
| The code is as follows |
Copy Code |
<style>
. compheader{Background:url (/images/a_hhplus.gif) no-repeat; padding-left:20px;
. Compheaderexpanded{background:url (/images/b_hhminus.gif) no-repeat;padding-left:20px;line-height:18px;}
. homenodesection{margin:0px; height:auto;padding-left:18px;}
. Compheader {line-height:18px}
. homenodesuper{padding-top:10px;}
</style> |
There are two pictures in the middle of the background, one is +, one is-number, this people find their own map, okay now look at the jquery code
| The code is as follows |
Copy Code |
| <script language= "JavaScript" > function Ajaxdata (ID)
{
alert (ID);
$.post ("/typeindex.php", {Pid:id}, function (data) {
$ (' #sectionHint ' +id). HTML (data);
});
if ($ (' #headBrand ' +id). Hasclass ("Compheader"))
{
$ (' #headBrand ' +id). attr ("Class", "compheaderexpanded");
}
Else
{
$ (' #headBrand ' +id). attr ("Class", "Compheader");
}
if ($ (' #sectionHintBox ' +id). CSS (' display ') = = ' block ')
{
$ (' #sectionHintBox ' +id). Hide (100);
}
Else
{
$ (' #sectionHintBox ' +id). Show (100);
}
}
</script> |
Okay, finally, the PHP file is on.
| The code is as follows |
Copy Code |
| <?php
Require_once (DirName (__file__). "/include/common.inc.php");
Mysql_connect ($cfg _dbhost, $cfg _dbuser, $cfg _dbpwd) or Die (Mysql_error ());
mysql_select_db ($cfg _dbname);
mysql_query ("Set Names ' $cfg _db_language '");
$topid = Intval (isset ($_post[' pid '))? $_post[' pid ']:9999999);
$sql = "SELECT * from". $cfg _dbprefix. " Arctype where reid= $topid "; $query = mysql_query ($sql) or Die (Mysql_error (). $sql);
$str = ';
if (mysql_num_rows ($query))//www.111cn.net
{
while ($rs = Mysql_fetch_array ($query))
{
$tn =getcount ($rs [' id ']);
$str. = "<li class=sonclassindex><a href=". Str_replace (' {cmspath} ', ', $rs [' Typedir ']). " > ". $rs [' TypeName ']." </a><small> ($TN) </small></li> ";
}
Echo $str;
Echo $str; } function GetCount ($id)
{
Global $cfg _dbprefix;
$sql = "SELECT * from". $cfg _dbprefix. " Archives where typeid= $id ";
$query = mysql_query ($sql) or Die (Mysql_error (). $sql);
Return mysql_num_rows ($query);
} ?> |
Well, the PHP code is not introduced, the database connection is called the DEDECMS system simple processing.
Note: This site original tutorial refused to reprint without link http://www.111cn.net
