整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Javascript之選項卡

          項卡

          選項卡在js中是一個重要的知識點。他沒有那么難,但在工作中卻有重要的位置。幾乎在每一個網站都能看到選項卡的實例。所以今天寫一下選項卡的實現。我們設想有四個按鈕分別來控制四個盒子當我們點擊當前的按鈕的時候,讓對應的盒子顯示,讓其余的盒子隱藏。

          點擊選項后變換不同的內容

          代碼部分

          第一部分

          第二部分


          小編比較直接,大家可以先收藏起來,然后用DW或者sublime敲一遍,遇到的任何問題都可以在評論區留言,小編會一一解答。


          謝謝。

          項卡頁面設計的基本思路是將n個div內容塊疊在相同的位置,然后通過JS控制每個div內容塊的CSS屬性,實現需要內容的顯示(其它塊的暫時隱藏)。

          簡單的效果演示所下:

          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          1 HTML代碼

          <div id="mainx">

          <div class="main"><!--2 main -->

          <div class="left">

          <div id="tab">

          <h3 class="up" onclick="goto1(1);">知與行</h3>

          <h3 onclick="goto1(2);">聽、講故事</h3>

          <h3 onclick="goto1(3);">學習網站</h3>

          <h3 onclick="goto1(4);">視頻網站</h3>

          <h3 onclick="goto1(5);">15</h3>

          <!--p11 start -->

          <div class="block" id="c11">

          <p>&nbsp;</p>

          </div>

          <!--p11 end -->

          <!--p12 start -->

          <div>

          </div> <!--p12 end -->

          <!--p13 start -->

          <div>

          <a >快樂學堂—小學生同步學習及親子教育的專業網站!</a>

          </div>

          <div>

          <ul>

          <li><a >文明之旅</a></li>

          <li><a >開講了</a></li>

          <li><a >百家講壇</a></li>

          <li><a >讀書</a></li>

          </ul>

          </div>

          2 CSS代碼

          #tab {

          position:relative;

          width:100%;/* 定義選項卡的整體寬度 */

          height:208px;

          clear:both;

          }

          #tab div {

          position:absolute;

          top:28px;

          left:0px;

          width:100%;

          height:180px;

          display:none;

          }

          #tab .block{

          display:block;

          padding-bottom:6px;

          border-right: #eee 1px dashed;

          }

          #tab h3{

          float:left;

          width:18.95%;

          height:1.625em;

          margin:1px 0px;

          line-height:1.625em;

          font-size:1em;

          font-weight:normal;

          text-align:center;

          color:#00007F;

          background:#EEEEEE url(tab_bg.gif) no-repeat right top;

          background-position:right;

          cursor:url(zfirst/css/rose.ani);

          display:block;

          overflow:hidden;

          margin-left:2px;

          border-bottom:2px solid #ddd;

          border-right:2px solid #ddd;

          }

          #tab .up {

          background:#fff url(tab_up_bg.gif) no-repeat;

          margin-left:2px;

          border-top:2px solid #eee;

          border-left:2px solid #eee;

          border-right:2px solid #eee;

          border-bottom:0px solid #fff

          }

          3 JS代碼

          function goto1(ao){

          var h=document.getElementById("tab").getElementsByTagName("h3");

          var d=document.getElementById("tab").getElementsByTagName("div");

          for(var i=0;i<10;i++){

          if(ao-1==i){

          h[i].className+=" up";

          d[i].className+=" block";

          }

          else {

          h[i].className=" ";

          d[i].className=" ";

          }}}

          機端排版不佳,建議網頁瀏覽,為方便復制,用的代碼,就沒用截圖。

          js(jQuery實現---推薦)

          <script type="text/javascript">
          	$(function(){
          		$('#btns input').click(function(){
          			//this原生對象
          			//給當前對象添加cur樣式,并把同級兄弟元素移除cur樣式
          			$(this).addClass('cur').siblings().removeClass('cur');
          			//$(this).index()獲取當前按鈕所在層級范圍的索引值
          	$('#contentsdiv').eq($(this).index()).addClass('active').siblings().removeClass('active');
          		});
          	});
          </script>
          

          js(閉包實現)

          <script type="text/javascript">
          	window.onload = function(){
          		var aBtn = document.getElementById('btns').getElementsByTagName('input');
          		var aCon = document.getElementById('contents').getElementsByTagName('div');
          		for(var i=0;i<aBtn.length;i++){
          			//閉包,將一個變量長期駐扎在內存當中,可用于循環中存索引值
          			(function(i){
          				aBtn[i].onclick = function(){
          					for(var j=0;j<aBtn.length;j++){
          						aBtn[j].className = '';
          						aCon[j].className = '';
          					}
          				this.className='cur';
          				//如果不用閉包,i的值始終是3
          				aCon[i].className = 'active';
          				}
          			})(i)				
          		}
          	}
          </script>
          

          css

          <style type="text/css">
          	.btns{
          		width:500px;
          		height: 50px;
          	}
          	.btns input{
          		width: 100px;
          		height: 50px;
          		background-color: #ddd;
          		color: #666;
          		border: 0px;
          	}
          	.btns input.cur{
          		background-color: gold;
          	}
          	.contents div{
          		width:500px;
          		height: 300px;
          		background-color: gold;
          		display: none;
          		line-height: 300px;
          		text-align: center;
          		font-size: 50px;
          	}
          	.contents div.active{
          		display: block;
          	}
          </style>
          

          html


          主站蜘蛛池模板: 亚洲一区二区中文| 福利一区二区三区视频午夜观看| 亚洲国产一区二区三区在线观看 | 亚洲制服中文字幕第一区| 国产日韩精品一区二区在线观看 | 久久久不卡国产精品一区二区 | 国产成人一区二区三区视频免费 | 少妇精品久久久一区二区三区| 日本一区二区三区在线看| 国产成人一区二区三中文| 一区二区三区亚洲| 精品少妇一区二区三区视频| 国产一区二区视频在线观看| 一级特黄性色生活片一区二区| 精品一区二区久久久久久久网精| 日韩一区二区a片免费观看| 国产91久久精品一区二区| 亚洲码一区二区三区| 精品国产一区二区三区麻豆| 无码福利一区二区三区| 国产伦精品一区二区三区女| 国产日韩精品视频一区二区三区| 国模私拍福利一区二区| 亚洲AV成人一区二区三区在线看| 精品欧洲av无码一区二区三区| 亚洲日韩AV一区二区三区中文| 亚洲一本一道一区二区三区| 国产情侣一区二区| 国产精品伦子一区二区三区| 午夜精品一区二区三区在线视| 国产高清在线精品一区小说 | 一区二区三区在线免费 | 亚洲国产精品一区二区久久| 性色av一区二区三区夜夜嗨 | 精品国产一区二区三区在线| 好爽毛片一区二区三区四无码三飞| 天堂va视频一区二区| 婷婷国产成人精品一区二| 国产日韩AV免费无码一区二区| 无码一区二区三区| 精品日韩一区二区三区视频|