javascript メニューのタブ切り替え
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript メニューのタブ切り替え相关的知识，希望对你有一定的参考价值。
.box_tab {
@extend %bw;
@extend %cf;
.tab {
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@include cV(margin-bottom,70px ,45px, 35px);
@include cV(margin-top,0px ,0px, 40px);
@include mq(sp) { display: none; }
li {
text-align: center;
cursor: pointer;
display: inline-block;
width: (100%/4);
display: flex;
justify-content: center;
align-items: center;
word-break:break-all;
@include mq(sp) {
width: (100%/2);
&:nth-child(-n + 2){
border-bottom: none;
}
&:nth-child(2){
border-right: 1px solid #333;
}
}
border: 1px solid #333;
margin: -1px 0 0 -1px;
padding: 0.7em;
&:last-child{
border-right: 1px solid #333;
}
&.select {
background: #333;
cursor: default;
a{
color: #fff;
}
}
&:hover {
transition: .5s;
background: #333;
cursor: pointer;
a{
color: #fff;
}
}
}
}
select {
width: 100%;
padding: 8px 10px;
margin-bottom: 20px;
}
}
.con_sightseeing{
@include mq(tab) {
width: 95%
}
@include mq(sp) {
width: 100%
}
@extend %bw;
@extend %cf;
#panel {
overflow: hidden;
position: relative;
li {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
visibility: hidden;
@include cV(padding, 0 10px 0 ,0 5px 0 ,0 10px 0 );
&.tab-content {
//display:none;
background: #fff;
z-index: 5;
opacity: 0;
&.select {
visibility: visible;
position: static;
opacity: 0.99; //webviewの残像の削除
background: #fff;
}
}
.box{
@include cV(margin-bottom,60px, 50px ,50px);
float: left;
margin-right: 2%;
box-shadow: 0 0 8px 0px $gray_h;
padding: 10px;
word-wrap: break-word;
@include mq(pc) {
width: 32%;
&:nth-child(3n){
margin-right: 0;
}
}
@include mq(tab) {
width: (100%/2-2);
&:nth-child(even){
margin-right: 0;
}
}
@include mq(sp) {
float: none;
width: 100%;
margin-right: 0;
}
.box_img{
@include cV(margin-bottom,20px ,20px, 15px);
position: relative;
padding-top: 61.7%;
overflow: hidden;
width: 100%;
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
}
.box_txt{
.box_st{
@include cV(margin-bottom,20px ,15px, 15px);
.st{
margin-bottom: 0.1em;
@include fsz_r(28,26,24);
font-weight: normal;
line-height: 1;
}
.inner_st{
display: block;
color: #666;
@include fsz_r(15,14,14);
margin-bottom: 5px;
&::before {
font-family: "Fontawesome";
content: "\f276";
margin-right: 5px;
}
}
}//.box_st
.inner_txt{
@include cV(margin-bottom,20px ,15px, 15px);
}
}
.box_btn{
@include mq(pc) {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.btn{
display: inline-block;
width: 48%;
&:first-child{
margin-right: 0.3em;
}
@include mq(sp) {
width: 100%;
margin-right: 0;
}
@include mq(tab) {
margin-bottom: 10px;
}
&.sp_btn{
@include mq(sp) {
margin-bottom: 10px;
}
}
a {
padding: 0.8em 0.1em;
@include fsz(15);
}//a
}//.btn
}
}
}
}
.box_pager {
@extend %bw;
@extend %cf;
text-align: center;
@include cV(margin-top,50px ,40px, 20px);
ul {
@include inline-block;
li {
@include inline-block;
&.prev {
i {
margin-right: .3em;
}
}
&.next {
i {
margin-left: .3em;
}
}
a {
display: block;
padding: .5em .6em;
&:hover,&.active {
background: $gray_d;
color: #fff;
text-decoration: none;
}
}
}
}
}
}
}<div class="box_tab">
<!-- <div id="tab"> -->
<div class="tab">
<ul>
<li class="select"><a href="#77777">全て</a></li>
<li><a href="#77777">タブネーム1</a></li>
<li><a href="#77777">タブネーム2</a></li>
<li><a href="#77777">タブネーム3</a></li>
</ul>
<form name="sort_form" class="view_sp">
<select name="sort" onchange="dropsort()">
<option value="#77777">全て</option>
<option value="#77777">タブネーム1</option>
<option value="#77777">タブネーム2</option>
<option value="#77777">タブネーム3</option>
</select>
</form>
</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_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-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-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_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-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-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_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-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-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 --> $(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,768);
$.each($match, function(i){
matchHeight($match.eq(i).find('.box'),(abi.pc) ? 3 : (abi.tab) ? 2 : 1,768);
matchHeight($match.eq(i).find('.box .box_txt .box_st'),(abi.pc) ? 3 : (abi.tab) ? 2 : 1,768);
matchHeight($match.eq(i).find('.box .box_txt .inner_txt'),(abi.pc) ? 3 : (abi.tab) ? 2 : 1,768);
});
}
}).firstLoad({
//firstLoad
pc_tab : function(){
},
sp : function(){
}
});
});
function dropsort() {
var browser = document.sort_form.sort.value;
location.href = browser
}以上是关于javascript メニューのタブ切り替え的主要内容，如果未能解决你的问题，请参考以下文章
javascript タブ切り替え中でheight-line，谷歌地图を使う