1. jQuery Coda Slider

一个基于jQuery Javascript 框架的滑动显示内容的Tab 标签效果。漂亮、流畅，多种操纵方法。

#2. Perspective tabs

Perspective tabs 是一个基于MooTools 的Javascript 插件。它最大的特点是可以在一个有限的横向空间里容纳更多的标签(标签可以横向滚动)。

#3. idTabs

另一个基于jQuery 框架的Javascript 插件，你可以把它非常简单的添加到你的网站中去，不过也别小瞧它，它还有很多功能等待你去挖掘呢。

#4. Tab Accordion

Tab Accordion 基于MOO.FX 开发，提供一种漂亮的手风琴折叠效果，有水平、两列和标签三种样式可以选择。

#5. XP Style Tab Panes

这是一个配置非常简单的动态标签脚本。你只要把需要显示的内容放到一个<div> 容器中，然后调用Javascript 函数创建动态标签就可以了。

#6. AJAX Tabs

Ajax Tabs 是一个应用Ajax 生成动态标签效果的脚本，附带的示例中演示了如何在Ajax Tabs 中动态显示文字、表格以及地图等内容的方法。

#7. Tabbed Page Interface

Tabbed Page Interface 是一个简单的利用Ajax 实现的无刷新动态转入内容的Javascript Tab 组件。

#8. jQuery Nested Tab Set

又一个基于jQuery 框架的Javascript 插件，它最大的特色在于可以在Tab 容器中继续嵌套另一个Tab 。

#9. Ajax Tabs Reloaded

Ajax Tabs Reloaded 可以让你在需要的时候为容器添加标签，而不一定必须在最初就指定标签的数量。

#10. Tabs in Scriptaculous

Tabs in Scriptaculous 可以帮你为你的网站建立一个交互式的Tab 效果。

 

 

 

 

 

雅虎三屏焦点图轮换代码

 

演示页面:http://yanshi.veeqi.com/code/jscode/yanshi/js_veeqi%20(18)/

 

js_veeqi (17).rar (1.34 MB)

js_veeqi (17).rar (1.34 MB)
下载次数: 3466

2008-6-5 13:22

Mini Tabbed Pages雅虎TAB效果

 

预览地址：http://www.68design.net/download/ad/68design2007114/index.html
下载地址：http://www.68design.net/download/ad/68design2007114.rar

 

 

2 超级简单的

 

<style> body {     font-family: Arial,"宋体";     font-size:9pt; } td { font-size:12px;; } .mousehand{     cursor:hand; } .titletable{     padding-left:5px;     background-color:#E9E9E9; }     table.TabBarLevel1{ } table.TabBarLevel1 td{ border:1px solid #CCCCCC; height:20px; background-color:#E1E1E1; } table.TabBarLevel1 td.Selected{ border-bottom-width:0px; background-color:#ffffff; } table.TabBarLevel1 td.Black{ border-left-width:0px; border-top-width:0px; border-right-width:0px; background-color:#FFFFFF; } table.Content{ border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; } </style> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr>     <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="TabBarLevel1" id="TabPage1">       <tr align="center">         <td width="130" id="imageTab1" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab1','心开风神','image');">热门图片</td>         <td width="7" class="Black"> </td>         <td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');">波希米亚</td>         <td width="7" class="Black"> </td>         <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');">红色<a href="http://www.jb51.net/list/list_72_1.htm" target="_blank"><font color=red>黑客</font></a></td>         <td width="7" class="Black"> </td>         <td width="" align="right" class="Black"><a href="http://www.jb51.net">脚本之家</a>  </td>       </tr>     </table>       <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content">         <tr>           <td height="110"><div id="divimagelist_all"> 正在加载...</div></td>         </tr>       </table></td> </tr> </table> <script language="javascript"> function switchTab(tabpage,tabid,action,type){     var oItem = document.getElementById(tabpage);        for(var i=1;i< 4;i++){         var x = document.getElementById(type + 'Tab' + i);             //alert(x);         x.className = "mousehand";         //var y = x.getElementsByTagName('a');         //y[0].style.color="#333333";     }         document.getElementById(tabid).className = "Selected";     //gethotimagelist(type+'_'+action);     divimagelist_all.innerHTML = type+'_'+action; } </script>
   

 

3 带样式的

 

 

<style>   *{font-size:12px}   #info {width:480px;}   #info ul{margin:0;padding:0;width:480px;list-style:none;color:#2F5FA1;}   #info li{float:left;background:#F4FBFF;border-right:1px solid #FFF;padding:3px 8px 3px 8px;cursor: pointer}   #info .tag-selected{background:#D0E9F7;padding:0;margin:0;padding:3px 8px 3px 8px;}   #info .content{border:1px solid #A6CBE7;padding:5px 3px 5px 3px;background-color:#FDFDFD;}   #info .cleard{clear:both;} </style> <script>   function wa666tag(tag){ for(i=1; i <6; i++){   if (i==tag) {   document.getElementById("tag"+i).className="tag-selected";   document.getElementById("info"+i).style.display="block";   }else{   document.getElementById("tag"+i).className="";   document.getElementById("info"+i).style.display="none";   } } } </script> <div id="info">   <ul>   <li class="tag" id="tag1" onmousemove="wa666tag('1');">热门活动</li>   <li class="tag" id="tag2" onmousemove="wa666tag('2');">最新功能</li>   <li class="tag-selected" id="tag3" onmousemove="wa666tag('3');">服务承诺</li>   <li class="tag" id="tag4" onmousemove="wa666tag('4');">最新成功故事</li>   <li class="tag" id="tag5" onmousemove="wa666tag('5');">热贴推荐</li>   <div class="cleard"></div>   </ul>   <div class="content" id="info1" style="display: none;">   <a href="http://www.wa666.cn" target="blank">热门活动</a></div>   <div class="content" id="info2" style="display: none;">   <a href="http://www.wa666.cn" target="blank">最新功能</a></div>   <div class="content" id="info3">   <a href="http://www.wa666.cn" target="blank">服务承诺</a></div>   <div class="content" id="info4" style="display: none;">   <a href="http://www.wa666.cn" target="blank">最新成功故事</a></div>   <div class="content" id="info5" style="display: none;">   <a href="http://www.wa666.cn" target="blank">热贴推荐</a></div> </div>
   

 

4

<style type="text/css"> body, td { font-size:12px; color:#000000; font-family: Arial, 宋体; line-height:140% } #table td a { display:block; color:#CB6736; float:left; color:#874b46; text-decoration:none; height:24px; line-height:24px; width:104px; text-align:center; font-weight:bold; } #table td a:hover, #table .current{ background:url("http://embed.eccn.com/img/1.gif") no-repeat top right; margin-left:-1px !important; margin-left:0px; color:#1F3A89; } </style> <script language="javascript" type="text/javascript">         //在线座谈 function change_option7(number,index){         for (var i = 1; i <= number; i++) {          document.getElementById('content7' + i).style.display = 'none';               document.getElementById('content7' + index).style.display = 'block';       } } </script> <table width="352" cellspacing="0" cellpadding="0" align="right" style="border:1px #91A7B4 solid;">   <tr>     <td height="24" style="background:url(http://www.eccn.com/icons/item-4c-352.jpg) repeat-x left top;" ><table width="100%" cellspacing="0" cellpadding="0" border="0" id="table">         <tr>           <td width="104" height="24" align="center" class="current"><a target="_blank" onmouseover="change_option7(3,1);" href="http://seminar.eccn.com/">在线座谈</a></td>           <td width="104" align="center"><a target="_blank" onmouseover="change_option7(3,2);" href="http://seminar.eccn.com">精华点播</a></td>           <td width="104" align="center"><a target="_blank" onmouseover="change_option7(3,3);" href="http://seminar.eccn.com">通信技术座谈</a></td>           <td width="38" align="center"/>           <td width="2" align="right"><img width="2" height="24" src="http://www.eccn.com/icons/line-white.jpg"/></td>         </tr>       </table>       <table width="96%" cellspacing="0" cellpadding="0" border="0" align="center" id="content71">         <tr>           <td width="4%">1</td>         </tr>       </table>       <table width="96%" cellspacing="0" cellpadding="0" border="0" align="center" style="display: none;" id="content72">         <tr>           <td align="right" colspan="2">2</td>         </tr>       </table>       <table width="96%" cellspacing="0" cellpadding="0" border="0" align="center" style="display: none;" id="content73">         <tr>           <td align="right" colspan="2">3</td>         </tr>       </table></td>   </tr> </table>
   

 

 

5  超级漂亮的163的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <!-- 引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程 Editor:weasle http://www.hxcgw.com Email:weasle@163.com QQ:112011531 --> <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"> <!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none;} /*选项卡1*/ #Tab1{ width:460px; margin:0px; padding:0px; margin:0 auto;} /*选项卡2*/ #Tab2{ width:576px; margin:0px; padding:0px; margin:0 auto;} /*菜单class*/ .Menubox { width:100%; background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif); height:28px; line-height:28px; } .Menubox ul{ margin:0px; padding:0px; } .Menubox li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; } .Menubox li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif); color:#739242; font-weight:bold; height:27px; line-height:27px; } .Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){   var menu=document.getElementById(name+i);   var con=document.getElementById("con_"+name+"_"+i);   menu.className=i==cursel?"hover":"";   con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <br><br> <div id="Tab1"> <div class="Menubox"> <ul>    <li id="one1" onmouseover="setTab('one',1,4)"  class="hover">新闻1</li>    <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>    <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>       <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox">     <div id="con_one_1" class="hover">新闻列表1</div>    <div id="con_one_2" style="display:none">新闻列表2</div>    <div id="con_one_3" style="display:none">新闻列表3</div>    <div id="con_one_4" style="display:none">新闻列表4</div>  </div> </div> <br> <div id="Tab2"> <div class="Menubox"> <ul>    <li id="two1" onmouseover="setTab('two',1,4)"  class="hover">新闻1</li>    <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li>    <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li>       <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li> </ul> </div> <div class="Contentbox">     <div id="con_two_1" >新闻列表1</div>    <div id="con_two_2" style="display:none">新闻列表2</div>    <div id="con_two_3" style="display:none">新闻列表3</div>    <div id="con_two_4" style="display:none">新闻列表4</div>  </div> </div> </body> </html>
   

 

6 看看新浪的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">         <head>                 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />                 <meta http-equiv="Content-Language" content="zh-CN" />                 <title>模仿新浪的选项卡效果 -- JavaScript教程,JS教程</title>                 <style type="text/css">                         *{font-size:12px;margin:0;padding:0;}                         #dreamdujsexe{width:748px; height:185px; overflow:hidden; border:1px #cccbc9 solid; line-height:20px;margin:2em;padding:2em;}                         ul{list-style: none;}                         a{text-decoration: none;}                         a:hover{text-decoration: underline;}                         .TabADS{width:160px;}                         .TabADS ul{width:160px; height:24px;background:#fff;}                         .TabADS li{width:40px; float:left; height:18px; padding:6px 0 0 0; background:url('http://image2.sina.com.cn/home/07index/sinahome_ws_013.gif') no-repeat right #e4e4e4; text-align:center; color:#333; cursor:pointer;}                         .TabADS .TasADSOn{background:url('http://image2.sina.com.cn/home/07index/sinahome_ws_012.gif') no-repeat right #ffe4a6; text-align:center; color:#333; font-weight:bold; cursor:pointer;}                         .TabADSCon{background:#FFD77B;padding:5px;width:150px;}                         .TabADSCon li{text-align:left; line-height:20px;}                         .dreamdu{margin-bottom:2em;}                 </style>                 <script language="javascript" type="text/javascript">                         function Show_TabADSMenu(tabadid_num,tabadnum)                         {                                 for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}                                 for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}                                 document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";                                 document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";                         }                 </script>         </head>         <body>                 <div class="dreamdu"><a href="http://www.dreamdu.com/javascript/">JavaScript教程</a>模仿<a href="http://www.sina.com.cn/">新浪</a>左侧的<strong>黄色选项卡</strong>效果</div>                 <div id="dreamdujsexe">                         <div class="TabADS">                                 <ul>                                         <li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">HTML</li>                                         <li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">CSS</li>                                         <li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">JS</li>                                         <li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);"><img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" />HP</li>                                 </ul>                         </div>                         <div class="TabADSCon">                                 <ul id="tabadcontent_10">                                         <li><a href="http://www.dreamdu.com/xhtml/">涉及到的HTML知识点</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_div/">div标签</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_ul/">ul标签</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_li/">li标签</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_style/">style标签</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_script/">script标签</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_meta/">meta标签</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_body/">body标签</a></li>                                         <li><a href="http://www.dreamdu.com/xhtml/tag_doctype/">DOCTYPE标签</a></li>                                 </ul>                                 <ul id="tabadcontent_11" style="display:none;">                                         <li><a href="http://www.dreamdu.com/css/">涉及到的CSS知识点</a></li>                                         <li><a href="http://www.dreamdu.com/css/property_font_size/">font-size属性</a></li>                                         <li><a href="http://www.dreamdu.com/css/property_text_align/">text-align属性</a></li>                                         <li><a href="http://www.dreamdu.com/css/property_cursor/">cursor属性</a></li>                                         <li><a href="http://www.dreamdu.com/css/property_background/">background属性</a></li>                                         <li><a href="http://www.dreamdu.com/css/property_border/">border属性</a></li>                                         <li><a href="http://www.dreamdu.com/css/property_margin/">margin属性</a></li>                                         <li><a href="http://www.dreamdu.com/css/property_padding/">padding属性</a></li>                                 </ul>                                 <ul id="tabadcontent_12" style="display:none;">                                         <li>涉及到的<a href="http://www.dreamdu.com/javascript/">javascript知识点</a>:</li>                                         <li>onmouseover函数</li>                                 </ul>                                 <ul id="tabadcontent_13" style="display:none;">                                         <li><a href="http://www.dreamdu.com/xhtml/exe_all/">html代码示例</a></li>                                         <li><a href="http://www.dreamdu.com/css/exe_all/">css代码示例</a></li>                                         <li><a href="http://www.dreamdu.com/javascript/exe_all_excellent/">javascript代码示例</a></li>                                 </ul>                         </div>                 </div>         </body> </html>
   

 

Easy Tabs 1.2——简单、轻量级的滑动菜单效果

easy-tabs.png (1.02 KB)

2008-6-8 15:48

 

http://bbs.80nian.net/thread-322-1-1.html

 

 

仿126邮箱选项卡的源码

http://bbs.80nian.net/thread-362-1-1.html

标志设计 LOGO设计 画册设计 海报设计 设计公司 画册设计 标志设计 LOGO设计 画册设计 海报设计 设计公司

http://www.designkey.cn

顶一下！ 爱国就来玩抗战吧，抗战推广员力挺这款打鬼子的 游戏！ 问道也是一款难得的好玩游戏， 问道推广人会让越来越多的朋友喜欢她！