<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

      如何設置TAB標簽效果

      2016-07-18 16:57:00
      GavinHsueh
      原創
      4102

      由于頁面板塊的的需要,我們經常會用到TAB標簽卡的效果,節省頁面布局空間,下面我們來看一個簡單的TAB標簽效果:

      大家可以在 蟬知系統中創建一個自定義區塊,然后把相應的HTML,CSS,JS代碼復制進去即可。

      HTML:


      <div id="tab" style="margin-left:100px;margin-top:20px">
        <div class="tabList">
      	<ul>
      		<li class="cur">標簽1</li>
      		<li>標簽2</li>
      		<li>標簽3</li>
      		<li>標簽4</li>
      	</ul>
        </div>
        <div class="tabCon">
      	<div class="cur">內容1</div>
      	<div>內容2</div>
      	<div>內容3</div>
      	<div>內容4</div>
        </div>
      </div>
      CSS:



      *{margin:0;padding:0;}
      body{font-size:14px;font-family:"Microsoft YaHei";}
      ul,li{list-style:none;}
      #tab{position:relative;}
      #tab .tabList ul li{
      	float:left;
      	background:#fefefe;
      	background:-moz-linear-gradient(top, #fefefe, #ededed);	
      	background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
      	background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
      	border:1px solid #ccc;
      	padding:5px 0;
      	width:100px;
      	text-align:center;
      	margin-left:-1px;
      	position:relative;
      	cursor:pointer;
      }
      #tab .tabCon{
      	position:absolute;
      	left:-1px;
      	top:32px;
      	border:1px solid #ccc;
      	border-top:none;
      	width:403px;
      	height:100px;
      }
      #tab .tabCon div{
      	padding:10px;
      	position:absolute;
      	opacity:0;
      	filter:alpha(opacity=0);
      }
      #tab .tabList li.cur{
      	border-bottom:none;
      	background:#fff;
      }
      #tab .tabCon div.cur{
      	opacity:1;
      	filter:alpha(opacity=100);
      }
      
      JS:



      window.onload = function() {
          var oDiv = document.getElementById("tab");
          var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
          var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
          var timer = null;
          for (var i = 0; i < oLi.length; i++) {
              oLi[i].index = i;
              oLi[i].onclick = function() {
                  show(this.index);
              }
          }
          function show(a) {
              index = a;
              var alpha = 0;
              for (var j = 0; j < oLi.length; j++) {
                  oLi[j].className = "";
                  aCon[j].className = "";
                  aCon[j].style.opacity = 0;
                  aCon[j].style.filter = "alpha(opacity=0)";
              }
              oLi[index].className = "cur";
              clearInterval(timer);
              timer = setInterval(function() {
                  alpha += 2;
                  alpha > 100 && (alpha = 100);
                  aCon[index].style.opacity = alpha / 100;
                  aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
                  alpha == 100 && clearInterval(timer);
              },
              5)
          }
      }
      我們來看一下效果:


      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>