标签页效果实现一

效果一

结构

  <div class="tab">
    <div class="menu">
      <ul>
        <li id="m1" onmouseover="gettab(1)" class="tabhover">标题一</li>
        <li id="m2" onmouseover="gettab(2)">标题二</li>
        <li id="m3" style="border-right:none" onmouseover="gettab(3)">标题三</li>    
      </ul>
    </div>
    <div class="ctn">
      <div id="c1">此处显示一的内容</div>
      <div id="c2" style="display:none">此处显示二的内容</div>
      <div id="c3" style="display:none">此处显示三的内容</div>
    </div>
  </div>

样式

.tab{ border:1px solid #FF0000; width:296px}
.menu{ font-size:12px}
.menu ul li{ text-align:center; display:block; float:left; height:25px; width:98px; line-height:25px; cursor:pointer; border-right-width:1px; border-bottom-width:1px; border-right-style:solid; border-bottom-style:solid; border-right-color:#FF0000; border-bottom-color:#FF0000}
.menu ul li.tabhover{ border-bottom-style:none; font-weight:bold; color:#FF0000}
.ctn{ padding-top:20px; padding-bottom:20px; padding-left:10px}
.cle{ clear:both; height:0px}

行为

<script type="text/javascript">
    function gettab(i) {
        for (n = 1; n <= 3; n++) {
            var m = document.getElementById("m" + n);
            var c = document.getElementById("c" + n);
            m.className = n == i ? "tabhover": "";
            c.style.display = n == i ? "block": "none";
        }
    }
</script>

注意

tab与li的宽度设置：98*3+2＝296

效果二

结构

<div class="tab">
  <div class="menu">
    <ul>
      <li id="m1" onmouseover="gettab(1)" class="tabhover">标题一</li>
      <li id="m2" onmouseover="gettab(2)">标题二</li>
      <li id="m3" onmouseover="gettab(3)">标题三</li>
    </ul><div class="cle"></div>
  </div>
  <div class="ctn">
    <div id="c1">此处显示一的内容</div>
    <div id="c2" style="display:none">此处显示二的内容</div>
    <div id="c3" style="display:none">此处显示三的内容</div>
  </div>
</div>

样式

.tab{ border:1px solid #FF0000; padding-top:20px}
.menu{ border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FF0000; padding-left:20px; font-size:12px; height:50px; position:relative}
.menu ul{ list-style-type:none; position:absolute; top:24px}
.menu ul li{ text-align:center; display:block; float:left; height:25px; width:50px; margin-right:5px; border:1px solid #FF0000; line-height:25px; cursor:pointer}
.menu ul li.tabhover{ border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#FFFFFF}
.ctn{ padding-top:20px; padding-bottom:20px; padding-left:10px}
.cle{ clear:both; height:0px}

行为

同上

注意

ul menu的定位设置
top：24＝50-25-1

转载于:https://www.cnblogs.com/hidepeng/archive/2011/03/26/1996194.html