Code666 (代码贴、代码片段)

[PHP] 自适应宽度的标签代码 →→→→→进入此内容的聊天室

来自 , 2019-04-27, 写在 PHP, 查看 128 次.
URL http://www.code666.cn/view/9e82757e
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  2. <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
  3. <meta name="keywords" content="JS代码,TAB标签,JS广告代码,JS特效代码" />
  4. <meta name="description" content="此代码内容为自适应宽度的标签导航，属于站长常用代码，更多TAB标签代码请访问模板无忧JS代码频道。" />
  5. <title>自适应宽度的标签导航_模板无忧</title>
  6. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  7. <STYLE type=text/css>BODY {
  8.         FONT-SIZE: 14px; FONT-FAMILY: "宋体"
  9. }
  10. OL LI {
  11.         MARGIN: 8px
  12. }
  13. #con {
  14.         FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px
  15. }
  16. #tags {
  17.         PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px
  18. }
  19. #tags LI {
  20.         BACKGROUND: url(images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
  21. }
  22. #tags LI A {
  23.         PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(images/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none
  24. }
  25. #tags LI.emptyTag {
  26.         BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
  27. }
  28. #tags LI.selectTag {
  29.         BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px
  30. }
  31. #tags LI.selectTag A {
  32.         BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
  33. }
  34. #tagContent {
  35.         BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff
  36. }
  37. .tagContent {
  38.         PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(images/bg.gif) repeat-x; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px
  39. }
  40. #tagContent DIV.selectTag {
  41.         DISPLAY: block
  42. }
  43. </STYLE>
  44.  
  45. <META content="MSHTML 6.00.2800.1589" name=GENERATOR></HEAD>
  46. <BODY>
  47. <DIV id=con>
  48. <UL id=tags>
  49.   <LI><A onClick="selectTag('tagContent0',this)"
  50.   href="javascript:void(0)">标签一</A> </LI>
  51.   <LI class=selectTag><A onClick="selectTag('tagContent1',this)"
  52.   href="javascript:void(0)">标签二</A> </LI>
  53.   <LI><A onClick="selectTag('tagContent2',this)"
  54.   href="javascript:void(0)">自适应宽度的标签</A> </LI></UL>
  55. <DIV id=tagContent>
  56. <DIV class=tagContent id=tagContent0>第一个标签的内容</DIV>
  57. <DIV class="tagContent selectTag" id=tagContent1>第二个标签的内容</DIV>
  58. <DIV class=tagContent id=tagContent2>第三个标签的内容</DIV></DIV></DIV>
  59. <p>
  60.   <SCRIPT type=text/javascript>
  61. function selectTag(showContent,selfObj){
  62.         // 操作标签
  63.         var tag = document.getElementById("tags").getElementsByTagName("li");
  64.         var taglength = tag.length;
  65.         for(i=0; i<taglength; i++){
  66.                 tag[i].className = "";
  67.         }
  68.         selfObj.parentNode.className = "selectTag";
  69.         // 操作内容
  70.         for(i=0; j=document.getElementById("tagContent"+i); i++){
  71.                 j.style.display = "none";
  72.         }
  73.         document.getElementById(showContent).style.display = "block";
  74.        
  75.        
  76. }
  77. </SCRIPT>
  78. </p>
  79.  
  80. <table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
  81.   <tr>
  82.     <td><p align="center">代码整理：<a href="http://www.mb5u.com/" target="_blank">模板无忧</a>　</p>
  83.       <p align="center">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
  84.       <p align="center"></p>
  85.       <p align="center"><p>这个TAB滑动门标签，可以自适应宽度，应用起来很方便。</p></p>
  86.     <p align="center"></p></td>
  87.   </tr>
  88. </table>
  89. </BODY></HTML>
  90.  

回复 "自适应宽度的标签代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666