让自己的生命充满有趣喜悦的故事,去勇敢经历,拼搏
回归自由: 添加multi tab 按钮

添加multi tab 按钮

Multi Tab
可以整齐分类你的小工具










不过添加这个Multi Tab 有点困难
很复杂的教程
看仔细哦~  0.0

教程开始-----------------

1.
设计-Edit HTMl  - Ctrl + F 找 </head>


</head> 的上面, copy & paste
这个代码




<script type='text/javascript'>//<![CDATA[function tabtampil_oom(TPID, id){  var Tabtampil = document.getElementById(TPID);  var TTs = Tabtampil.firstChild;  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;  var TT = TTs.firstChild;  var i   = 0;  do  {    if (TT.tagName == "A")    {      i++;      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";      TT.className = (i == id) ? "Active" : "";      TT.blur();    }  }  while (TT = TT.nextSibling);  var Halamans = Tabtampil.firstChild;  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;  var Halaman = Halamans.firstChild;  var i    = 0;  do  {    if (Halaman.className == 'Halaman')    {      i++;      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";      Halaman.style.overflow = "auto";      Halaman.style.display  = (i == id) ? 'block' : 'none';    }  }  while (Halaman = Halaman.nextSibling);}function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);}function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);document.write('');}//]]></script>


就像这样


看清楚了没? 是这样的哦!

2。
按save


3。


设计-添加小工具-HTML/JavaScript

copy & paste 这个代码




<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color:#ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid#eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1 标题</a> <a>Tab 2 标题</a> <a>Tab 3 标题</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/> 
Tab 1 内容
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Tab 2 内容

</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Tab 3 内容
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>



小提醒:
Ctrl+F找吧~很难解释阿~
#eee 是 tab 的背景颜色
#fff multi tab 工具框框颜色

#ffffff 工具背景颜色

#eee 是 tab 按钮框框颜色
#000000 是 tab 标题颜色


最后save.
完成!



记得看仔细啊!

不然会弄乱哦!

我之前就是这样

一弄乱

就要重新做过了 /.\

别学我这么糊涂啊!



你们要加油咯!!

祝你们成功!!

加油!!