三种简洁的Tab网页选项卡

2024-09-05 12:19:52

字体：大中小

来源：转载

供稿：网友

三种简洁的Tab网页选项卡，其中一个是滑动门，三款都没有用到任何图片，纯JavaScript+CSS实现，非常实用，代码简洁，有利于学习js和CSs技术。稍做甚至不做修改，就可以用到你的网址上，同时也会一个网页上布局多个TAB的朋友提供一份参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>三种简洁的Tab网页选项卡</title><style type="text/css"> </style><script> </script></head><body><br /><br /><div id="tabs0"> <ul class="menu0" id="menu0">  <li onclick="setTab(0,0)" class="hover">新闻</li>  <li onclick="setTab(0,1)">评论</li>  <li onclick="setTab(0,2)">技术</li>  <li onclick="setTab(0,3)">点评</li> </ul> <div class="main" id="main0">  <ul class="block"><li>新闻列表</li></ul>  <ul><li>评论列表</li></ul>  <ul><li>技术列表</li></ul>  <ul><li>点评列表</li></ul> </div></div><br /><br /><div id="tabs1"> <div class="menu1box">  <ul id="menu1">   <li class="hover" onmouseover="setTab(1,0)">新闻</li>   <li onmouseover="setTab(1,1)">评论</li>   <li onmouseover="setTab(1,2)">技术</li>   <li onmouseover="setTab(1,3)">点评</li>  </ul> </div> <div class="main1box">  <div class="main" id="main1">   <ul class="block"><li>新闻列表</li></ul>   <ul><li>评论列表</li></ul>   <ul><li>技术列表</li></ul>   <ul><li>点评列表</li></ul>  </div> </div></div><br /><br /><div id="tabs2"> <div class="menu2box">  <div id="tip2"></div>  <ul id="menu2">   <li class="hover" onmouseover="nowtab(2,0)">新闻</li>   <li onmouseover="nowtab(2,1)">评论</li>   <li onmouseover="nowtab(2,2)">技术</li>   <li onmouseover="nowtab(2,3)">点评</li>  </ul> </div>  <div class="main" id="main2">爱好者 </div></div></body></html>

上一篇：CSS 竖排折叠菜单

下一篇：只用一张背景图实现的CSS菜单