php 20180516タブ切り替え内のマッチハイト
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php 20180516タブ切り替え内のマッチハイト相关的知识，希望对你有一定的参考价值。
//園田さんがやったやつ
//http://west02.ab-ss.com/hotelorientalexpress.com/html/osakashinsaibashi/lang/guide/
<script>
function matchHeight($o,m) {
$o.css('height','auto')
var foo_length = $o.length;
for(var i = 0 ; i < Math.ceil(foo_length / m) ; i++) {
var maxHeight = 0;
for(var j = 0; j < m; j++){
if ($o.eq(i * m + j).height() > maxHeight) {
maxHeight = $o.eq(i * m + j).height();
}
}
for(var k = 0; k < m; k++){
$o.eq(i * m + k).height(maxHeight);
}
}
}
// readyEvent
$(function(){
//tab menu
var $tabMenu = $('.tab ').find('li');
var $match = $('.con_sightseeing ul li');
$w.on({
//load
'load' : function(){
$(document).on('click', '.tab ul li', function(){
var index = $('.tab ul li').index(this);
$('.tab ul li').removeClass('select');
$(this).addClass('select');
$('.tab-content').removeClass('select').eq(index).addClass('select');
});
},
//scroll
'scroll' : function(){
}
}).superResize({
//resize
resizeAfter : function(){
//tab menu
matchHeight($tabMenu,(abi.pc) ? 4 : (abi.tab) ? 4 : 2);
$.each($match, function(i){
matchHeight($match.eq(i).find('.box'),(abi.pc) ? 3 : (abi.tab) ? 2 : 2);
matchHeight($match.eq(i).find('.box .box_txt .box_st'),(abi.pc) ? 3 : (abi.tab) ? 2 : 2);
matchHeight($match.eq(i).find('.box .box_txt .inner_txt'),(abi.pc) ? 3 : (abi.tab) ? 2 : 2);
});
}
}).firstLoad({
//firstLoad
pc_tab : function(){
},
sp : function(){
}
});
});
</script>
<div class="box_tab">
<!-- <div id="tab"> -->
<div class="tab">
<ul>
<li class="select"><a href="#77777">全て</a></li>
<li><a href="#77777">遊ぶ・体験する</a></li>
<li><a href="#77777">観光地</a></li>
<li><a href="#77777">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</a></li>
</ul>
</div><!-- /#obj_tab -->
<div class="con_sightseeing">
<ul id="panel">
<li id="panel01" class="tab-content select">
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(1);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="'#77777'" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_guide01.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">ホテルから徒歩で約10分</span>
<h4 class="st">道頓堀</h4>
</div>
<p class="inner_txt">道頓堀といえばグリコの看板などによって象徴される道頓堀は、大阪・ミナミの代表的な繁華街です。飲食店もさまざまなジャンルが軒を連ねます。</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(2);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/9TDC5CLqsKF2" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">ホテルから徒歩で約5分</span>
<h4 class="st">心斎橋</h4>
</div>
<p class="inner_txt">御堂筋～一筋東とのびる心斎橋筋商店街などアーケード付の商店街があります。大阪市中央区の繁華街です。</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(3);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/3jMeN5Fzx8q" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="http://www.shinsaibashi.or.jp/lang/en" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_guide03.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">ホテルから電車で約15分</span>
<h4 class="st">通天閣</h4>
</div>
<p class="inner_txt">大阪のシンボルタワー通天閣。通天閣からは大阪を一望できます。足の裏をなでると幸運が訪れるという神・ビリケン像があったり、大阪のグルメも堪能できます。</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(4);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/DK6a2tbzh8x" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="https://www.tsutenkaku.co.jp/Guide-pdf/mishiran-guide-english.pdf" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_guide04.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">ホテルから車で約25分</span>
<h4 class="st">大阪城</h4>
</div>
<p class="inner_txt">大阪城は日本100名城に選定されています。大阪城公園では四季折々の花を楽しめるほか、様々なイベントも行われています。</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(5);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/b3SnWisHngB2" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold"><a href="http://www.osakacastle.net/english/" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_guide06.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">ホテルから歩いて約10分</span>
<h4 class="st">ドン・キホーテ 道頓堀店</h4>
</div>
<p class="inner_txt">様々はものが揃うドン・キホーテ。家電からお土産まで購入できます。</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(6);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/AgbaQxffL212" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="http://www.donki.com/en/store/shop_detail.php?add=1&shop_id=110&pref=28" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(1);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="'#77777'" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(1);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="'#77777'" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
</li><!-- /#panel01 -->
<li id="panel02" class="tab-content hide">
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttext</span>
<h4 class="st">texttexttexttexttextt</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexxttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_ghost view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(7);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttetexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_ghost view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(8);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
</li><!-- /#panel02 -->
<li id="panel03" class="tab-content hide">
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_ghost view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(9);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttextexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttettexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(10);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
</li><!-- /#panel03 -->
<li id="panel04" class="tab-content hide">
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_ghost view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(13);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(14);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(15);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(16);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
<div class="box">
<div class="box_img">
<img src="<?php echo LOCATION_MODULE;?>images/guide/img_nophoto.jpg" alt="nophoto">
</div>
<div class="box_txt">
<div class="box_st">
<span class="inner_st">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
<h4 class="st">texttexttexttexttexttexttexttexttext</h4>
</div>
<p class="inner_txt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box_btn">
<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(17);">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_gold view_sp sp_btn"><a href="#77777" target="_brank">地図を見る<i class="fa fa-angle-double-right"></i></a></p>
<p class="btn btn_ghost"><a href="#77777" target="_brank">HPはこちら<i class="fa fa-angle-double-right"></i></a></p>
</div>
</div><!-- box -->
</li><!-- /#panel04 -->
</ul><!-- /#panel -->
<div class="box_pager">
<ul>
<li class="prev"><a href="#77777"><i class="fa fa-angle-left"></i>BACK</a></li>
<li class="extend">…</li>
<li><a href="#77777">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#77777">3</a></li>
<li class="extend">…</li>
<li class="next"><a href="#77777">NEXT<i class="fa fa-angle-right"></i></a></li>
</ul>
</div><!-- /.con_pager -->
</div><!-- con_sightseeing -->
</div><!-- /.box_tab -->
以上是关于php 20180516タブ切り替え内のマッチハイト的主要内容，如果未能解决你的问题，请参考以下文章
php 20180316ひな形以外で现状一番単纯なタブ切り替え