DIV+CSS滑动门怎么读取数据库的内容
这个是滑动门的代码:程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滑动门</title> <style media="screen" type="text/css"> <!-- *{font-size:12px;} html,body{margin:0;text-align:left;over-flow:hidden;height:100%;width:100%;} UL{list-style-type:none; margin:0px;} .ttl{height:18px;} .ctt{ height:auto; padding:6px; clear:both; border: 1px solid #CCCCCC; } .w936{ width:380px; clear:both; height: 120px; margin-top: 20px; margin-right: 0; margin-bottom: 2px; margin-left: 0; } .normaltab { color:#1F3A87; } .hovertab { color:#FF0000; background-color: #99CC00; } .dis{display:block;} .undis{display:none;} .tabs { width:100%; background:#BBD9EE; font-size:93%; line-height:normal; } .tabs ul { margin:0; padding:10px 10px 0 0px; list-style:none; } .tabs li { display:inline; margin:0; padding:0; cursor: pointer; } .tabs a { float:left; background:url ("http://hiphotos.baidu.com/lijiping/pic/item/312c793e42646d2d70cf6cdd. jpg") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } .tabs a span { float:left; display:block; background:url ("http://hiphotos.baidu.com/lijiping/pic/item/2d5983351541430190ef398d. jpg") no-repeat right top; padding:5px 15px 4px 6px; color:#666; } .tabs a span {float:none;} .tabs a:hover span { color:#FF9834; } .tabs a:hover { background-position:0% -42px; } .tabs a:hover span { background-position:100% -42px; } --> </style> <script type="text/javascript" language="javascript"> <!-- function g(o){return document.getElementById(o);} function HoverLi(n) { for(var i=1;i<=3;i++){g('tb_'+i);g('tbc_0'+i).className='undis';} g('tbc_0'+n).className='dis';g('tb_'+n); } //--> </script> </head> <body> <div class="w936"> <div id="tb_" class="tb_ tabs"> <ul> <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航1 </span></a></li> <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航2 </span></a></li> <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航3 </span></a></li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_01">内容1</div> <div class="undis" id="tbc_02">内容2</div> <div class="undis" id="tbc_03">内容3</div> </div> </div> </div> </div> </body> </html>现在我要调用数据库,把上面的内容改成从数据库中调用内容显示。
数据库conn.asp
将下面代码改成滑动门效果,内容调用数据库,请问该如何更改呢,高手们指导下。谢谢!
程序代码:
<table width="380" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" height="30" valign="top">栏目导航1 栏目导航2 栏目导航3</td> </tr> <tr> <td colspan="2"> <% dim m m=9 set rs_news=server.createobject("adodb.recordset") sqltext4="select * from news order by AddDate desc" rs_news.open sqltext4,conn,1,1 %> </td> </tr> <%i=0 do while not rs_news.eof%> <%if rs_news("showtitle")=false then%> <tr> <td width="20" height="20"><img src="images/tb/arrow_4.gif" width="12" height="11"></td> <td width="360" style='BORDER-bottom: #999999 1px dotted'> <div align="left"> <p style='line-height:150%'> <%if rs_news("Okhref")=false then%> <%if rs_news("page")=false then%> <a href="shownews.asp?id=<%=rs_news("id")%>" target="_blank" title="标题:<%=rs_news("title")%> 更新时间:<%=rs_news("AddDate")%>"> <%else%> <a href="shownews1.asp?id=<%=rs_news("id")%>" target="_blank" title="标题:<%=rs_news("title")%> 更新时间:<%=rs_news("AddDate")%>"> <%end if%> <%else%> <a href="<%=rs_news("href")%>" target="_blank" title="标题:<%=rs_news("title")%> 更新时间:<%=rs_news("AddDate")%>"> <%end if%> <%if rs_news("AddDate")=date() then%> <font color="red"><%=cutstr(rs_news("title"),25)%></font> <%else%> <%=cutstr(rs_news("title"),25)%> <%end if%></a> </div> </td> </tr> <%end if%> <% m=m-1 if m<1 then exit do rs_news.movenext i=i+1 loop rs_news.close %> <tr> <td colspan="2"><div align="right"><a href="NewsClass.asp?BigClass=公司新闻" target="_blank">更多</a></div></td> </tr> </table>