Travel:最新消息(Tabs設定)

Travel:最新消息(Tabs設定)

範例結果

在網頁設計中,常利用Tab分類內容,簡化空間,故增加Tabs設定說明

<!-- tabs start -->
<div class="tabs">
  <ul>
    <li>1.Czech</li>
    <li>2.KENYA</li>
    <li>3.DUBAI</li>
    <li>4.Netherlands</li>
    <li>5.Italy</li>
  </ul>
  <div class="tabsContent">
    <div>
      <p>1.Czech:捷克蜜月 一生一次 無可取代<br>
        捷克蜜月團,團團額滿!象徵我們的蜜月新人天長地久到白首!</p>
      <img src="../img/slider_L/slider01.jpg" width="400" alt=""/> </div>
    <div>
      <p>2.KENYA:聆聽東非的心跳 大自然的呼喚 肯亞動物大遷徙,野生動物與我們不期而遇,眼神交會瞬間無限怠動</p>
      <img src="../img/slider_L/slider02.jpg" width="400" alt=""/> </div>
    <div>
      <p>3.DUBAI:法拉利樂園 棕櫚島皇宮. 星帆船酒店‧杜拜</p>
      <img src="../img/slider_L/slider03.jpg" width="400" alt=""/> </div>
    <div>
      <p>4.Netherlands:荷蘭風車水世界 鬱金香花季</p>
      <img src="../img/slider_L/slider04.jpg" width="400" alt=""/> </div>
    <div>
      <p>5.Italy:義大利 賽格威夜遊羅馬 發現義大利不同角度的美</p>
      <img src="../img/slider_L/slider01.jpg" width="400" alt=""/> </div>
  </div>
</div>
<div class="tabs">
  <ul>
    <li>1.Czech</li>
    <li>2.KENYA</li>
    <li>3.DUBAI</li>
    <li>4.Netherlands</li>
    <li>5.Italy</li>
  </ul>
  <div class="tabsContent">
    <div>
      <p>1.Czech:捷克蜜月 一生一次 無可取代<br>
        捷克蜜月團,團團額滿!象徵我們的蜜月新人天長地久到白首!</p>
      <img src="../img/slider_L/slider01.jpg" width="400" alt=""/> </div>
    <div>
      <p>2.KENYA:聆聽東非的心跳 大自然的呼喚 肯亞動物大遷徙,野生動物與我們不期而遇,眼神交會瞬間無限怠動</p>
      <img src="../img/slider_L/slider02.jpg" width="400" alt=""/> </div>
    <div>
      <p>3.DUBAI:法拉利樂園 棕櫚島皇宮. 星帆船酒店‧杜拜</p>
      <img src="../img/slider_L/slider03.jpg" width="400" alt=""/> </div>
    <div>
      <p>4.Netherlands:荷蘭風車水世界 鬱金香花季</p>
      <img src="../img/slider_L/slider04.jpg" width="400" alt=""/> </div>
    <div>
      <p>5.Italy:義大利 賽格威夜遊羅馬 發現義大利不同角度的美</p>
      <img src="../img/slider_L/slider01.jpg" width="400" alt=""/> </div>
  </div>
</div>
<!-- tabs end -->
.tabs { color:#000; width: 80%; margin: 0 auto; position: relative;}
.tabs ul { list-style-type:none; display: flex;}
.tabs ul li{ line-height: 50px; text-align: center; font-size: .8em; 
			 transition: all .5s; padding: 0 5px; margin-right:2px;
			 border-radius: 10px 10px 0 0; cursor:pointer;
			 background: #FFADAE; flex: 1;}
.tabs ul li:last-child{ margin-right: 0;}
.tabs ul li:hover{flex: 2; color:#FFFFFF;}

.tabs .tabsContent { width: 100%; position: relative; min-height: 150px; }
.tabs .tabsContent div{position: absolute; left: 0; top: 0;
					width: calc(100% - 20px); padding: 10px;
					/*利用box-sizing,無法利用jQuery求其height*/}
.tabs .tabsContent div img{float: right; width: 30%; height: auto;
							box-shadow: 1px 1px 5px #000; border-radius: 10px;
							border: 1px solid #000; box-sizing: border-box;}
.tabs .tabsContent div p{float: left; width: 70%;}
//設定 .tabs li 標籤顏色
var colorArray = ['#ffcdd2','#c5cae9','#90caf9','#80deea','#80cbc4'];
for(var j=0; j<$('.tabs').length; j++){
	for(var i=0; i<$('.tabs').eq(j).find('li').length; i++){
		$('.tabs').eq(j).find('li').eq(i).css('background-color',colorArray[i]);
		$('.tabs').eq(j).find('.tabsContent div').eq(i).css('background-color',colorArray[i]);
	}
}
    //預設顯示第一頁的內容
    $('.tabs .tabsContent div').hide();                
    $('.tabs .tabsContent div:nth-child(1)').show();   
    $('.tabs').each(function(){
      var  $tabsH = $(this).children('.tabsContent').children('div').eq(0).outerHeight(true);
//		alert(tabsH);
//		alert($(this).children('.tabsContent').children('div').eq(0).html());
        $(this).children('.tabsContent').css('height',$tabsH);
		$(this).css('height',$tabsH + 80);
		
    });
    //當滑鼠滑入li標籤位置時
    $('.tabs li').hover(
        function(){
            var tabsIndex = $(this).index();
			var $obj = $(this).parents('.tabs').find('.tabsContent').children('div');
            $obj.eq(tabsIndex).stop(true,true).fadeIn(100).siblings('div').fadeOut(100);
        },
        function(){}
    );