仿windows选项卡效果连载5 » « 仿windows选项卡效果连载3

仿windows选项卡效果连载4

Categories: 技术文章 2006/十一月2 * Comments(0) 2,365 views

仿windows选项卡效果连载4,不定期添加中，请关注。

下载: tabs4.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <base href="http://www.cn-lan.com/">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>无标题文档</title>
  7. <script language="JavaScript">
  8. var txtstr_1="  QQ:30382 Email:<a href=mailto:g-carton@163.com>g-carton.com</a>";
  9. var txtstr_2="  需要网站的朋友可以与我联系。";
  10. var txtstr_3="  论坛现在暂时关闭，请朋友们在QQ上联系."
  11. var txtstr_4="  孤独的时候便走向自然；  <br>寂寞的时候便走向音乐；  <br>失败的时候便走向憧憬；  <br>委屈的时候便走向创造和友情。<br>"
  12. function changediv(n){
  13. for(i=1;i<=5;i++){
  14. eval("document.getElementById('s'+i+'').className='under'+n+''");
  15. //此次循环的作用是分别将s开头的ID处的下边界设置为相应的颜色
  16. }
  17. for(i=1;i<=4;i++){
  18. eval("document.getElementById('c"+i+"').className='a"+n+"'");
  19. //此次循环初始化所有的选项卡按钮的背景图片为cb0.gif，银灰色
  20. }
  21. eval("document.getElementById('c"+n+"').className='t"+n+"'");
  22. //然后设置鼠标移动到的相应位置的背景图片为相应的图片，修改对应的样式表。
  23. eval("document.getElementById('bodyt').className='body"+n+"'");
  24. //修改选项卡下半部的样式，使其的色彩与上半部的图片相适应。
  25. bodytxt=eval('txtstr_'+n);
  26. if(bodytxt==""){
  27. alert("数据正在下载，请稍候!");}
  28. else
  29. {
  30. document.getElementById("txt1").innerHTML=bodytxt;
  31. //设置选项卡主体部分相应的文字。
  32. }
  33. }
  34. </script>
  35. <style type="text/css">
  36. <!--
  37. .t1 {
  38.   background-image: url(cb1.gif);
  39.   border-bottom-width: medium;
  40.   border-bottom-style: none;
  41.   border-right-width: 1px;
  42.   border-right-style: solid;
  43.   border-right-color: #88c027;
  44. }
  45. .t2 {
  46.   background-image: url(cb2.gif);
  47.   padding-top: 3px;
  48.   border-right-width: 1px;
  49.   border-right-style: solid;
  50.   border-right-color: #eac751;
  51. }
  52. .t3 {
  53.   background-image: url(cb3.gif);
  54.   padding-top: 3px;
  55.   border-right-width: 1px;
  56.   border-right-style: solid;
  57.   border-right-color: #ee6f69;
  58. }
  59. .t4 {
  60.   background-image: url(cb4.gif);
  61.   padding-top: 3px;
  62.   border-right-width: 1px;
  63.   border-right-style: solid;
  64.   border-right-color: #7eaffb;
  65. }
  66. .t0 {
  67.   background-image: url(cb0.gif);
  68.   padding-top: 3px;
  69.   border-bottom-width: 0px;
  70.   border-bottom-style: none;
  71.   border-right-width: 1px;
  72.   border-right-style: solid;
  73.   border-right-color: #AEABA9;
  74. }
  75. -->
  76. </style>
  77. <style type="text/css">
  78. <!--
  79. td {
  80.   font-size: 12px;
  81.   line-height: 16px;
  82. }
  83. .d1 {
  84.   padding-top: 3px;
  85.   border-bottom-width: medium;
  86.   border-bottom-style: none;
  87. }
  88. .d2{
  89.   padding-top: 3px;
  90.   border-bottom-width: medium;
  91.   border-bottom-style: none;
  92. }
  93. .d3{
  94.   padding-top: 3px;
  95.   border-bottom-width: medium;
  96.   border-bottom-style: none;
  97. }
  98. .d4{
  99.   padding-top: 3px;
  100.   border-bottom-width: medium;
  101.   border-bottom-style: none;
  102. }
  103. .under1 {
  104.   border-bottom-width: 1px;
  105.   border-bottom-style: solid;
  106.   border-bottom-color: #88c027;
  107. }
  108. .under2 {
  109.   border-bottom-width: 1px;
  110.   border-bottom-style: solid;
  111.   border-bottom-color: #eac751;
  112. }
  113. .under3 {
  114.   border-bottom-width: 1px;
  115.   border-bottom-style: solid;
  116.   border-bottom-color: #ee6f69;
  117. }
  118. .under4 {
  119.   border-bottom-width: 1px;
  120.   border-bottom-style: solid;
  121.   border-bottom-color: #7eaffb;
  122. }
  123. .body1 {
  124.   background-color: #d6efb5;
  125.   border-top: 0px none;
  126.   border-right: 1px solid #88c027;
  127.   border-bottom: 1px solid #88c027;
  128.   border-left: 1px solid #88c027;
  129. }
  130. .body2 {
  131.   background-color:#fff7be;
  132.   border-top: 0px none #eac751;
  133.   border-right: 1px solid #eac751;
  134.   border-bottom: 1px solid #eac751;
  135.   border-left: 1px solid #eac751;
  136. }
  137. .body3 {
  138.   background-color: #ffe5e3;
  139.   border-top: 0px none;
  140.   border-right: 1px solid #ee6f69;
  141.   border-bottom: 1px solid #ee6f69;
  142.   border-left: 1px solid #ee6f69;
  143. }
  144. .body4 {
  145.   background-color: #d4eaff;
  146.   border-top: 0px none;
  147.   border-right: 1px solid #7eaffb;
  148.   border-bottom: 1px solid #7eaffb;
  149.   border-left: 1px solid #7eaffb;
  150. }
  151. .firstunderline {
  152.   border-bottom-width: medium;
  153.   border-bottom-style: none;
  154. }
  155. .bodytop {
  156.   border-top-width: medium;
  157.   border-top-style: none;
  158. }
  159. -->
  160. </style>
  161. <style type="text/css">
  162. <!--
  163. .a1 {
  164.   background-image: url(cb0.gif);
  165.   border-bottom-width: 1px;
  166.   border-bottom-style: solid;
  167.   border-bottom-color: #88c027;
  168.   border-right-width: 1px;
  169.   border-right-style: solid;
  170.   border-right-color: #AEABA9;
  171. }
  172. .a2 {
  173.   background-image: url(cb0.gif);
  174.   border-bottom-width: 1px;
  175.   border-bottom-style: solid;
  176.   border-bottom-color: #eac751;
  177.   border-right-width: 1px;
  178.   border-right-style: solid;
  179.   border-right-color: #AEABA9;
  180. }
  181. .a3 {
  182.   border-bottom-width: 1px;
  183.   border-bottom-style: solid;
  184.   border-bottom-color: #ee6f69;
  185.   background-image: url(cb0.gif);
  186.   border-right-width: 1px;
  187.   border-right-style: solid;
  188.   border-right-color: #AEABA9;
  189. }
  190. .a4 {
  191.   background-image: url(cb0.gif);
  192.   border-bottom-width: 1px;
  193.   border-bottom-style: solid;
  194.   border-bottom-color: #7eaffb;
  195.   border-right-width: 1px;
  196.   border-right-style: solid;
  197.   border-right-color: #AEABA9;
  198. }
  199. .temp {
  200.   background-image: url(cb0.gif);
  201.   border-bottom-width: 1px;
  202.   border-bottom-style: solid;
  203.   border-bottom-color: #88c027;
  204.   border-right-width: 1px;
  205.   border-right-style: solid;
  206.   border-right-color: #AEABA9;
  207. }
  208. -->
  209. </style>
  210. </head>
  211. <body>
  212. <table width="294" border="0" align="center" cellpadding="0" cellspacing="0">
  213. <tr valign="bottom"> 
  214. <td id="s1" width="8" height="19" class="under1"><br> </td>
  215. <td id="c1" width="60" align="center" class="t1" onMouseOver="changediv(1)">绿色动画</td>
  216. <td id="s2" width="8" class="under1"><br> </td>
  217. <td id="c2" width="60" align="center" class="temp" onMouseOver="changediv(2)">g-carton</td>
  218. <td id="s3" width="8" class="under1"><br> </td>
  219. <td id="c3" width="60" align="center" class="temp" onMouseOver="changediv(3)">蓝色月光</td>
  220. <td id="s4" width="8" class="under1"><br> </td>
  221. <td id="c4" width="60" align="center" class="temp" onMouseOver="changediv(4)"">孤零飘客</td>
  222. <td id="s5" width="49" class="under1"><br>
  223. </td>
  224. </tr>
  225. </table>
  226. <table width="294" height="94" border="0" align="center" cellpadding="0" cellspacing="0" class="body1" id="bodyt"><tbody>
  227. <tr>
  228. <td valign="top"><br><div id="txt1">
  229.   <script language="javascript">
  230.   document.write(txtstr_1);
  231.   </script>
  232.   </div> </td>
  233.   </tr>
  234. </tbody>
  235. </table>
  236. <p> </p>

标签：,

阅读该文章的读者还阅读了： 您也可以阅读与此文相关的文章： 看看还有没有其他您感兴趣的文章：

想说点什么吗？

引用通告 RSS订阅评论

我要评论