php 20180316ひな形以外で现状一番単纯なタブ切り替え
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 20180316ひな形以外で现状一番単纯なタブ切り替え相关的知识,希望对你有一定的参考价值。
$(function() {
//クリックしたときのファンクションをまとめて指定
$('.tab li').click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
//indexという変数に代入します。
var index = $('.tab li').index(this);
//コンテンツを一度すべて非表示にし、
$('.content li').css('display','none');
//クリックされたタブと同じ順番のコンテンツを表示します。
$('.content li').eq(index).css('display','block');
//一度タブについているクラスselectを消し、
$('.tab li').removeClass('select');
//クリックされたタブのみにクラスselectをつけます。
$(this).addClass('select')
});
});
.tab{overflow:hidden;}
.tab li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;}
.tab li.select{background:#eee;}
.content li{background:#eee; padding:20px;}
.hide {display:none;}
//ひな形分より記述が少ない、しかしスマホ時の表示はselectではない
//http://blog.three-co.jp/web/558/
<ul class="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<ul class="content">
<li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</li>
<li class="hide">なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</li>
<li class="hide">新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。</li>
<li class="hide">弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</li>
</ul>
以上是关于php 20180316ひな形以外で现状一番単纯なタブ切り替え的主要内容,如果未能解决你的问题,请参考以下文章
python 単纯な重点サンプリングの例
html XHTMLひな形
markdown SharedPreferenceに単纯なオブジェクト,泛型を使ったオブジェクトを保存
python 単纯ベイズで手书き文字2クラス分类(MNIST)
css 【旧内容】现状でGoogleフォントで字体显示プロパティを并用する方法font-display:swap【适応済み】
日语简历在线做成下载的网站(收藏)