js之类似tab实现二

预实现效果....

一:原理:

1.采用div的style属性.style.display="none";或.style.display="block"; 控制是否显示!!!

2.主要用到的几个js

<script>
 
function changeFirst(id){

var cat=document.getElementById("cat"+id);
var img=document.getElementById("img"+id)
if(cat.style.display=="block"){
 cat.style.display="none";
 
}else{
 cat.style.display="block";
 
}
}
function change(id){

var cat=document.getElementById("cat_"+id);
var img=document.getElementById("img_"+id)
if(cat.style.display=="block"){
 cat.style.display="none";
 img.innerHTML="<img src='images/+.gif' />";
}else{
 cat.style.display="block";
 img.innerHTML="<img src='images/-.gif' />";
}

}
function changeLast(id){

var cat=document.getElementById("cat__"+id);
var img=document.getElementById("img__"+id)
if(cat.style.display=="block"){
 cat.style.display="none";
img.innerHTML="<img src='images/+.gif' />";
}else{
 cat.style.display="block";
 img.innerHTML="<img src='images/-.gif' />";
}

}

</script>

3.传递的参数:为其控制的div块,代码:

 <!-- 以cat_+大类id为span的id -->
<!-- span cat_AAAA开始
 -- 查询大类子类 ,子类1
{
若 子类1 没有子类了:则 <ul><li class="STYLE1"><a href="detail.html?dname=子类1的 Id" >子类1名称(1)</a></li></ul>
若 子类1 有子类:
      <ul><li class="STYLE1"><span id="img_AAAA"><img src="images/+.gif" /></span><a href="index-mid.htm" onclick="javascript:change('32')">子类1名称</a></li></ul>
      且再设置一个(span  以cat_+ 子类1的id为span的id ...span cat_BBBB开始)
           继续查改子类1的子类,做同样处理
      ...span cat_BBBB结束)
}
span cat_AAAA结束
-->
 <tr>
    <td width="100%" height="20" background="images/bg2.jpg"  align="left"> 
      <ul style="height:20px;">
          <li style="background-color:#D6EEFC" >
              <a href="index-mid.htm"  onclick="javascript:changeFirst('3')">中药(2)</a><!--改变的参数: id= '3' . name='试一试' -->
          </li> 
      </ul>
      <span id="cat3"  style="display:none;background-color:#FFFFFF;" valign="top"> 
          <ul><li class="STYLE1"><a href="index-mid.htm" title="抗疟疾病药">内科用药(1)</a></li></ul>

          <ul><li class="STYLE1"><span id="img_32"><img src="images/+.gif" /></span><a href="index-mid.htm" title="抗肠虫药" onclick="javascript:change('32')">外科用药(2)</a></li></ul>
        
        <span id="cat_32"  style="display:none;background-color:#FFFFFF;" valign="top">
           <ul><li class="STYLE2"><span id="img_32"><img src="images/+.gif" /></span><a href="index-mid.htm" title="左旋咪唑" 
           onclick="javascript:change('322')">   清热剂(2-1)</a></li></ul>
                <span id="cat_322"  style="display:none;background-color:#FFFFFF;" valign="top">
                      <ul><li class="STYLE3"><a href="index-mid.htm" title="抗疟疾病药">&nbsp;内科用药(1)</a></li></ul>
                </span>
           <ul><li class="STYLE2"><a href="/cgi-bin/detail.pl?dname=%bc%d7%b1%bd%df%e4%df%f2" title="甲苯咪唑">甲苯咪唑(2-2)</a></li></ul>
           <ul><li class="STYLE2"><a href="/cgi-bin/detail.pl?dname=%b0%a2%b1%bd%b4%ef%df%f2" title="阿苯达唑">阿苯达唑(2-3)</a></li></ul>
        </span>
      </span>
     
</td>
</tr>
<!-- 循环结束 -->

4.每一个大类为一个tr.....

 

5.可以在后台从数据库读取,读取后组成字符串,在前台显示.

代码

private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面
            tree_str = this.getTreeStr("0","中国",0);
        }

        public string  getTreeStr(string id,string name,int style)
        {
            DataTable dt1 = this.getTableByFid(id);//最外层
            style++;
            if(dt1 != null && dt1.Rows.Count > 0 )
            {
                tree_str +=" <ul><li class='STYLE"+style+"'><span id='img_"+ id + "'><img src='images/+.gif' /></span><a href='index-mid.htm' onclick='javascript:change(" +id+")'>子类"+name+"</a></li></ul>";
                tree_str += "<span id='cat_"+id + "' style='display:none;background-color:#FFFFFF;' valign='top'>";

                for(int index = 0;index < dt1.Rows.Count ; index ++)
                {
                    string strId1 = dt1.Rows[index]["cityId"].ToString();
                    string name1 = dt1.Rows[index]["cityName"].ToString();
                    DataTable dt2 = this.getTableByFid(strId1);
                    if(dt2!= null && dt2.Rows.Count>0)
                    {
                        tree_str = this.getTreeStr(strId1,name1,style);
                    }
                    else
                    {
                        style++;
                        tree_str +="<ul><li class='STYLE"+style+"'><a href='detail.html?dname=子类2"+strId1+"'>" +name1+ "</a></li></ul>";
                        style--;
                    }
                }
                tree_str += "</span>";
            }
            else 
            {
                tree_str +="<ul><li class='STYLE"+style+"'><a href='detail.html?dname=子类1"+id+"'>" +name + "</a></li></ul>";
            }
            return tree_str;
        }

        public DataTable getTableByFid(string strId)
        {
            Base.DbClass db = new WebApplication1.Base.DbClass();
            DataTable dt = db.RunSqlStr("select * from tcity where fatherId = "+strId,"tcity");
            if(dt.Rows.Count > 0 )
            {
                return dt;
            }
            return null;
        }