快捷導(dǎo)航

js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)代碼分享（2款）

更新時(shí)間：2021年08月17日 10:36:29 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了兩種js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下

本文實(shí)例講述了js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)效果。實(shí)例包含兩款CSS圓角代碼，可鼠標(biāo)點(diǎn)擊，也可鼠標(biāo)移動(dòng)上去顯示效果，分享給大家供大家參考。具體如下：
運(yùn)行效果圖：-------------------查看效果-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)代碼如下

<!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=utf-8" />
<title>js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)代碼</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" /><script type="text/javascript">
  function $(obj){return document.getElementById(obj)}
  function Tab(Xname,Cname,Lenght,j){for(i=1;i<Lenght;i++){eval("$('"+Xname+i+"').className='n2'");}eval("$('"+Xname+j+"').className='n1'");for(i=1;i<Lenght;i++){eval("$('"+Cname+i+"').style.display='none'");eval("$('"+Cname+j+"').style.display='block'");}}
</script>
</head>
<body>
<div style="width:500px;margin:0 auto">
 <p>onmouseover事件</p>
 <div class="Tab">
  <div class="title"> <a href="#" id="a1" class="n1" onmouseover="Tab('a','ax',6,1)"><span>ASP</span></a> <a href="#" id="a2" class="n2" onmouseover="Tab('a','ax',6,2)"><span>PHP</span></a> <a href="#" id="a3" class="n2" onmouseover="Tab('a','ax',6,3)"><span>DELPHI</span></a> <a href="#" id="a4" class="n2" onmouseover="Tab('a','ax',6,4)"><span>MOOTOOLS</span></a> <a href="#" id="a5" class="n2" onmouseover="Tab('a','ax',6,5)"><span>WECLCOME TO</span></a>
   <div></div>
  </div>
  <div class="tabcon">
   <ul id="ax1">
    <li><a href="#">JavaScript 經(jīng)典效果集－第二期策劃中 </a></li>
    <li><a href="#">老貓的理想制作w3school javascript 電子書(shū) chm版 </a></li>
    <li><a href="#">發(fā)貼需知 | 新手入門(mén) | 常見(jiàn)問(wèn)題 | 精華整理 0722 </a></li>
   </ul>
   <ul id="ax2" style="display:none">
    <li><a href="#" target="_blank">Serv-U 6.3 雨林木風(fēng)內(nèi)部中文破解版</a></li>
    <li><a href="#" target="_blank">櫻桃企業(yè)網(wǎng)站管理系統(tǒng)ASP v1.0</a></li>
    <li><a href="#" target="_blank">校無(wú)憂(yōu)在線考試系統(tǒng)ASP版 v1.0</a></li>
   </ul>
   <ul id="ax3" style="display:none">
    <li><a href="#" target="_blank">CSS+Js制作的抽屜式菜單</a></li>
    <li><a href="#" target="_blank">4個(gè)簡(jiǎn)潔實(shí)用的CSS橫向菜單，帶搜索框</a></li>
    <li><a href="#" target="_blank">OpenCart 開(kāi)源PHP網(wǎng)店 v1.4.94</a></li>
   </ul>
   <ul id="ax4" style="display:none">
    <li><a href="#">近期技術(shù)討論貼(持續(xù)更新:12-10) </a></li>
    <li><a href="#">發(fā)貼需知 | 新手入門(mén) | 常見(jiàn)問(wèn)題 | 精華整理 0722 </a></li>
    <li><a href="#">關(guān)于奧運(yùn)期間管理及只開(kāi)放邀請(qǐng)注冊(cè)的通知</a></li>
   </ul>
   <ul id="ax5" style="display:none">
    <li><a href="#" target="_blank">Serv-U 6.3 雨林木風(fēng)內(nèi)部中文破解版</a></li>
    <li><a href="#" target="_blank">櫻桃企業(yè)網(wǎng)站管理系統(tǒng)ASP v1.0</a></li>
    <li><a href="#" target="_blank">校無(wú)憂(yōu)在線考試系統(tǒng)ASP版 v1.0</a></li>
   </ul>
  </div>
 </div>
 <p>onclick事件</p>
 <div class="Tab">
  <div class="title"> <a href="#" id="b1" class="n1" onclick="Tab('b','bx',6,1)"><span>JAVA</span></a> <a href="#" id="b2" class="n2" onclick="Tab('b','bx',6,2)"><span>VB</span></a> <a href="#" id="b3" class="n2" onclick="Tab('b','bx',6,3)"><span>VC++</span></a> <a href="#" id="b4" class="n2" onclick="Tab('b','bx',6,4)"><span>JQUERY</span></a> <a href="#" id="b5" class="n2" onclick="Tab('b','bx',6,5)"><span>NEXT WHICH ONE……</span></a>
   <div></div>
  </div>
  <div class="tabcon">
   <ul id="bx1">
    <li><a href="#">JavaScript 經(jīng)典效果集－第二期策劃中 </a></li>
    <li><a href="#">老貓的理想制作w3school javascript 電子書(shū) chm版 </a></li>
    <li><a href="#">發(fā)貼需知 | 新手入門(mén) | 常見(jiàn)問(wèn)題 | 精華整理 0722 </a></li>
   </ul>
   <ul id="bx2" style="display:none">
    <li><a href="#" target="_blank">CSS+Js制作的抽屜式菜單</a></li>
    <li><a href="#" target="_blank">4個(gè)簡(jiǎn)潔實(shí)用的CSS橫向菜單，帶搜索框</a></li>
    <li><a href="#" target="_blank">OpenCart 開(kāi)源PHP網(wǎng)店 v1.4.94</a></li>
   </ul>
   <ul id="bx3" style="display:none">
    <li><a href="#" target="_blank">Serv-U 6.3 雨林木風(fēng)內(nèi)部中文破解版</a></li>
    <li><a href="#" target="_blank">櫻桃企業(yè)網(wǎng)站管理系統(tǒng)ASP v1.0</a></li>
    <li><a href="#" target="_blank">校無(wú)憂(yōu)在線考試系統(tǒng)ASP版 v1.0</a></li>
   </ul>
   <ul id="bx4" style="display:none">
    <li><a href="#">近期技術(shù)討論貼(持續(xù)更新:12-10) </a></li>
    <li><a href="#">發(fā)貼需知 | 新手入門(mén) | 常見(jiàn)問(wèn)題 | 精華整理 0722 </a></li>
    <li><a href="#">關(guān)于奧運(yùn)期間管理及只開(kāi)放邀請(qǐng)注冊(cè)的通知</a></li>
   </ul>
   <ul id="bx5" style="display:none">
    <li><a href="#" target="_blank">CSS+Js制作的抽屜式菜單</a></li>
    <li><a href="#" target="_blank">4個(gè)簡(jiǎn)潔實(shí)用的CSS橫向菜單，帶搜索框</a></li>
    <li><a href="#" target="_blank">OpenCart 開(kāi)源PHP網(wǎng)店 v1.4.94</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

以上就是為大家分享的js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)代碼，希望大家可以喜歡。

您可能感興趣的文章: