三種簡潔的Tab網(wǎng)頁選項(xiàng)卡

2024-09-05 12:19:52

字體：大中小

供稿：網(wǎng)友

三種簡潔的Tab網(wǎng)頁選項(xiàng)卡，其中一個(gè)是滑動(dòng)門，三款都沒有用到任何圖片，純JavaScript+CSS實(shí)現(xiàn)，非常實(shí)用，代碼簡潔，有利于學(xué)習(xí)js和CSs技術(shù)。稍做甚至不做修改，就可以用到你的網(wǎng)址上，同時(shí)也會(huì)一個(gè)網(wǎng)頁上布局多個(gè)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網(wǎng)頁選項(xiàng)卡</title><style type="text/css"> </style><script> </script></head><body><br /><br /><div   class="70qarhlowxag"   id="tabs0"> <ul class="menu0" id="menu0">  <li onclick="setTab(0,0)" class="hover">新聞</li>  <li onclick="setTab(0,1)">評(píng)論</li>  <li onclick="setTab(0,2)">技術(shù)</li>  <li onclick="setTab(0,3)">點(diǎn)評(píng)</li> </ul> <div   id="70qarhlowxag"   class="main" id="main0">  <ul class="block"><li>新聞列表</li></ul>  <ul><li>評(píng)論列表</li></ul>  <ul><li>技術(shù)列表</li></ul>  <ul><li>點(diǎn)評(píng)列表</li></ul> </div></div><br /><br /><div   class="70qarhlowxag"   id="tabs1"> <div   id="70qarhlowxag"   class="menu1box">  <ul id="menu1">   <li id="70qarhlowxag"    class="hover" onmouseover="setTab(1,0)">新聞</li>   <li onmouseover="setTab(1,1)">評(píng)論</li>   <li onmouseover="setTab(1,2)">技術(shù)</li>   <li onmouseover="setTab(1,3)">點(diǎn)評(píng)</li>  </ul> </div> <div   id="70qarhlowxag"   class="main1box">  <div   id="70qarhlowxag"   class="main" id="main1">   <ul class="block"><li>新聞列表</li></ul>   <ul><li>評(píng)論列表</li></ul>   <ul><li>技術(shù)列表</li></ul>   <ul><li>點(diǎn)評(píng)列表</li></ul>  </div> </div></div><br /><br /><div   class="70qarhlowxag"   id="tabs2"> <div   id="70qarhlowxag"   class="menu2box">  <div   class="70qarhlowxag"   id="tip2"></div>  <ul id="menu2">   <li id="70qarhlowxag"    class="hover" onmouseover="nowtab(2,0)">新聞</li>   <li onmouseover="nowtab(2,1)">評(píng)論</li>   <li onmouseover="nowtab(2,2)">技術(shù)</li>   <li onmouseover="nowtab(2,3)">點(diǎn)評(píng)</li>  </ul> </div>  <div   id="70qarhlowxag"   class="main" id="main2">愛好者 </div></div></body></html>

上一篇：CSS 豎排折疊菜單

下一篇：只用一張背景圖實(shí)現(xiàn)的CSS菜單