网页面html简单实现tab鼠标经过切换栏目文章
在做网站时往往需要添加做一些栏目文章切换,可对cms,如phpcms等可以使用标签列出文章来,
首先栏目鼠标经过onMouseOver="return swap_tab(1)" class="bt1" 多个需要增加改数字1
更多 id="j1" 多个需要增加改数字j1
内容 id="n1" 多个需要增加改数字n1
下面是效果图,可以自己修改修改
html:
<tr> <td><table width="387" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#e4e4e4;"> <tr class="tab"> <td height="30" width="100" align="center" style="color:#888585;" class="btl" id="p1" onMouseOver="return swap_tab(1)"><span>栏目1</span></td> <td height="30" width="100" align="center" style="color:#888585;" class="bt2" id="p2" onMouseOver="return swap_tab(2)"><span>栏目2</span></td> <td height="30" width="100" align="center" style="color:#888585;" class="bt3" id="p3" onMouseOver="return swap_tab(3)"><span>栏目3</span></td> <td height="30" width="100" align="right"> <p id="j1" style="display: block;"><a target="_blank" href="#">1更多+</a></p> <p id="j2" style="display: none;"><a target="_blank" href="#">2更多+</a></p> <p id="j3" style="display: none;"><a target="_blank" href="#">3更多+</a></p> </td> </tr> </table> <table cellspacing=0 cellpadding=0 width="387" border=0 align="center"> <tr id="n1" style="display: block;"> <td> <table width="387" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="line-height:30px;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="dian"> <td width="20" height="24" align="center" style="color:#b91023" >></td> <td align="left"> <a href="#" target="_blank" title="#" class="lbt">1标题1标题1标题1标题</a> </td> <td align="right">1970-01-01</td> </tr> </table></td> </tr></table></td> </tr> <tr id="n2" style="display: none;"> <td> <table width="387" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="line-height:30px;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="dian"> <td width="20" height="24" align="center" style="color:#b91023" >></td> <td align="left"> <a href="#" target="_blank" title="#" class="lbt">2标题2标题2标题2标题</a> </td> <td align="right">1970-01-01</td> </tr> </table></td> </tr></table></td> </tr> <tr id="n3" style="display: none;"> <td> <table width="387" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="line-height:30px;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="dian"> <td width="20" height="24" align="center" style="color:#b91023" >></td> <td align="left"> <a href="#" target="_blank" title="#" class="lbt">3标题3标题3标题3标题</a> </td> <td align="right">1970-01-01</td> </tr> </table></td> </tr></table></td> </tr> </table> </td> </tr>
js:
function swap_tab(n) { //鼠标触发事件 for (var i = 1; i < 4; i++) { var curC = document.getElementById("n" + i); var curB = document.getElementById("p" + i); var mores = document.getElementById("j" + i); if (n == i) { curC.style.display = "block"; curB.className = "bt1"; mores.style.display = "block"; } else { curC.style.display = "none"; curB.className = "bt2"; mores.style.display = "none"; } } }
css:
.tab span{ float: left; cursor: pointer; font-weight: bold; text-align: center; font-size: 14px; width:100px; line-height:30px; } .tab span:hover{ background:#0168b7; color:#FFFFFF; width:100px; }
效果:
笔者:Chervehong
本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
本文仅是作者观点,如文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。
如果觉得本文对你有所帮助不如【推荐】一下!
再次感谢您耐心的读完本篇文章。
本文仅是作者观点,如文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。
如果觉得本文对你有所帮助不如【推荐】一下!
再次感谢您耐心的读完本篇文章。