純 CSS+JS 通用選項卡

請看源碼吧，各段都有詳細註釋。

<!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=gb2312" />
<title>選項卡</title>
<style type="text/css">
/*核心：
選項頁切換：先把各選項內容塊設置成 display: none，再把當前選項的 .tabOn .tabContentBox 設置爲 display: block;
選項頁是分屬不同的 li 的，要讓它們定位到相同的位置，就要用到 position: absolute; 而這時又不是相對窗口的絕對定位，而是相對於整個選項組 ul 的定位，因爲給 .tabList .tabBox 設置 position:relative;。
從 http://www.awflasher.com/blog/archives/731 學到，要讓某個節點相對於其上級的節點絕對定位，而不是相對於窗口，就給要參照的上級節點設置 position:relative;。由選項這個例子可以知道，這個上級節點不必是直接的父節點，可以是若干級以上的節點，即某節點設置了 position:relative; 後，它的各級子節點再用 position: absolute; 是都將參照此節點而非窗口。
這裏 top 的 30px 就是選項頭 .tabBox h4 的高度。
*/
.tabBox {
height:100%;
position:relative;
background:#fff;
border:1px solid #99F;
}
.tabBox .tabContentBox {
margin:1px;
padding: 10px;
width:570px;
height:60px;
text-align: left;
overflow: hidden;
background: #fff;
position: absolute;
top: 30px;
left: 0;
display: none;
}

/*原例是鼠標懸停就切換，我要的是點擊再切換，所以不用 .tabOption:hover 這個級聯 */
.tabBox .tabOn .tabContentBox {
display: block;
}

/* 初始化 */
body {
font: 12px/1 "宋體", SimSun, serif;
background:#fff;
color:#000;
}

/* 清除瀏覽器默認的margin和padding值 */
ul,li,dl,dt,dd {
margin:0;
padding:0;
}
ul,li {
list-style:none outside; /* 清除瀏覽器中列表項默認的佔位 */
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
/* 選項卡整體外觀定義 */
.tabBox {
width:580px;
height:115px;
overflow:hidden;
}
/*百分比寬度居然支持 2 位小數，在 FF 裏完美合成整條，而 IE 裏還是有點空白。看來只好用 JS 算成像素值了，最後剩餘的幾像素都放在最後一個即可。
width:25%; 只是默認的 4 個選項時用的，選項個數不是 4 時，由 JS 均分出寬度。選項頭的左右邊框樣式做到 li 下屬的 h4 標籤上，這樣的好處是 JS 算寬度時只考慮 width 即可，不用管邊框之類的零星數。*/
.tabBox li {
float:left;
width:25%;
text-align:center;
}
/*選項頭的選中和未選樣式。這裏好像不能用 padding 來垂直居中，會讓邊框超出，只好改用 line-height　配 height。選項卡的樣式剛好利用 li 裏套的 h4 來實現：未選中時底邊框和外框同色，左右邊框和選項頭背景同色；選中時底邊框和內容的背景同色，左右邊框和外框同色。*/
.tabBox h4 {
cursor:pointer;
margin:0;
padding: 0;
height: 30px;
line-height:30px;
color:#036;
font-size:12px;
font-weight:normal;
display:block;
background:#edf2fa;
border-bottom:1px solid #99F;
}
.tabBox .tabOn h4, .tabBox h4.tabOnFirst, .tabBox h4.tabOnFinal {
color:#06f;
background:#fff;
border-left:1px solid #99F;
border-right: 1px solid #99F;
border-bottom:1px solid #FFF;
}
.tabBox h4.tabOnFirst {
border-left:1px solid #fff;
border-bottom:1px solid #FFF;
}
.tabBox h4.tabOnFinal {
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
</style>
<script type="text/javascript" language="javascript">
<!--
/*
通用選項卡
2009-9-9 15:16:13
作者：雪峯
歡迎轉載使用，請包含此段完整說明。

純 CSS 樣式，無需背景圖實現選項卡樣式。
不限選項個數，只需按此網頁結構配置選項內容到 ul 列表即可。
完全無需節點 ID，同一頁面中可以多次使用。
程序根據選項卡個數自動調整選項頭的寬度樣式。
JS 程序與頁面元素徹底分離，只需要 window.onload = tabUl; 即可啓用。
IE6/7, Firefox 2/3, Opera 9 兼容
*/
var tabUl = function()
{
//取元素實際呈現的樣式對象
var getRealStyle = function(node)
{
  var RealStyle;
  if (node.currentStyle)                            /*先試 IE 的簡單API */
  {
   RealStyle = node.currentStyle;
  }
  else if (window.getComputedStyle)              /* 再試 W3C API */
  {
   RealStyle = window.getComputedStyle(node, null);
  }
  return RealStyle;
};

//選中選項卡時的切換
var tabOn = function()
{
  var node = this;
  tabList = this.parentNode;
  tabOptions = tabList.getElementsByTagName("li");
  var tabNum = tabOptions.length;
  for (var i=0; i<tabNum; i++)
  {
   if (tabOptions[i].className.indexOf('tabOption') >= 0)
   {
    //先把各 li 都恢復成 tabOption
    tabOptions[i].className = "tabOption";
    //把各 li 裏的 h4 都恢復成空 class
    var tabTitle = tabOptions[i].getElementsByTagName("h4");
    tabTitle[0].className = '';

    //當前的 li 增加 tabOn，當前 li 內的 h4 再根據位置增加 tabOnFirst 或 tabOnFinal
    if (tabOptions[i] == node)
    {
     this.className += ' tabOn';
     var classTab = (0==i) ? 'tabOnFirst':(((tabNum-1)==i)?'tabOnFinal':'');
     tabTitle[0].className = classTab;
    }
   }
  }
};

//找 class="tabBox" 的 ul 節點，批量註冊事件處理函數及處理樣式
var ul = document.getElementsByTagName('ul');
for (var i=0; i<ul.length; i++)
{
  if (ul[i].className.indexOf('tabBox') >= 0)
  {
   //均分選項頭寬度
   var realStyle = getRealStyle(ul[i]);
   //做選項卡的 UL 通常都顯式定義像素寬度，不用判斷直接用 realStyle 了。

var boxWidth = parseInt(realStyle.width);

var li = ul[i].getElementsByTagName('li');
var tabNum = li.length;

   //選項頭的左右邊框樣式做到 li 下屬的 h4 標籤上，這樣的好處是 JS 算寬度時只考慮 width 即可，不用管邊框之類的零星數。
   for (var j=0; j<tabNum; j++)
   {
    //先取平均分的寬度的下限值
    var liWidth = Math.floor(boxWidth/tabNum);
    //最末一個取整體寬度前去前面各個選項頭的寬度剩下的
    if ((j+1) == tabNum)
    {
     liWidth = boxWidth - liWidth * j;
    }
    li[j].style.width = liWidth +'px';
    //這裏可以選擇註冊給點擊或懸停事件
    li[j].onmouseover = tabOn;
    //li[j].onclick = tabOn;
   }
  }
}
};

window.onload = tabUl;
-->
</script>

</head>
<body>
<h1>通用選項卡演示</h1>
<ul class="tabBox">

    <li class="tabOption tabOn">
      <h4 class="tabOnFirst">選項1</h4>
      <div class="tabContentBox">
     1的具體內容<br /><a href="http://www.snowpeak.org" target="_blank">www.snowpeak.org</a>
      </div>
    </li>
    <li class="tabOption">
      <h4>選項2</h4>
      <div class="tabContentBox">
    2的具體內容<br /><a href="http://www.snowpeak.org" target="_blank">www.snowpeak.org</a>
      </div>
    </li>
    <li class="tabOption">
      <h4>選項3</h4>
      <div class="tabContentBox">
        3的具體內容<br /><a href="http://www.snowpeak.org" target="_blank">www.snowpeak.org</a>
      </div>
    </li>
</ul>

<br /><br /><br /><br /><br /><br />
<ul class="tabBox">
    <li class="tabOption tabOn">
      <h4 class="tabOnFirst">選項1</h4>
      <div class="tabContentBox">
        1的具體內容<br /><a href="http://www.snowpeak.org" target="_blank">www.snowpeak.org</a>
      </div>
    </li>
    <li class="tabOption">
      <h4>選項2</h4>
      <div class="tabContentBox">
    2的具體內容<br /><a href="http://www.snowpeak.org" target="_blank">www.snowpeak.org</a>
      </div>
    </li>
    <li class="tabOption">
      <h4>選項3</h4>
      <div class="tabContentBox">
        3的具體內容<br /><a href="http://www.snowpeak.org" target="_blank">www.snowpeak.org</a>
      </div>
    </li>
    <li class="tabOption">
      <h4>選項4</h4>
      <div class="tabContentBox">
        4的具體內容<br /><a href="http://www.snowpeak.org" target="_blank">www.snowpeak.org</a>
      </div>
    </li>
</ul>
</body>
</html>

雪峯

發佈了52 篇原創文章 · 獲贊 7 · 訪問量 32萬+

私信關注

純 CSS+JS 通用選項卡

工作中用到的腳本合集

24-5-18 X

無插件在Eclipse中配置Resin方法

iReport 3.5 版設置英文界面

《國王與小鳥》MKV 網盤發佈!

浮動層菜單

CSS+JavaScript 通用循環滾動條

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結