前提・実現したいこと
html,css,jQueryでタブバーを作っています。
jQueryの書き方がわからないです。
初めての質問です。
よろしくお願いします。
該当のソースコード
html,css,jQuery
ソースコード
html
</li> <li class="hide" id="tab3">ある国に、「白雪姫」と称される容貌に優れた王女がいた。しかし彼女の継母(グリム童話初版本では実母)である王妃は、自分こそが世界で一番美しいと信じていた。彼女が秘蔵する魔法の鏡は、「世界で一番美しいのはだれか」との問いにいつも「それは王妃様です」と答え、王妃は満足な日々を送っていた。 白雪姫が7歳になったある日、王妃が魔法の鏡に「世界で一番美しい女は」と訊ねたところ、「それは白雪姫です」との答えが返ってくる。怒りに燃える王妃は猟師を呼び出すと、「白雪姫を殺し、証拠として彼女の肺臓と肝臓(※作品によっては心臓となっている)を取って帰ってこい。」と命じる。しかし猟師は白雪姫を不憫がり、殺さずに森の中に置き去りにする。そして王妃へは証拠の品として、イノシシの肝臓を持ち帰る。王妃はその肝臓を白雪姫のものだと信じ、大喜びで塩茹にして食べる。 森に残された白雪姫は、7人の小人(sieben Zwerge)たちと出会い、生活を共にするようになる。一方、白雪姫を始末して上機嫌の王妃が魔法の鏡に「世界で一番美しいのは?」と尋ねたところ「それは白雪姫です」との答えが返ってくる。白雪姫がまだ生きている事を知った王妃は物売りに化け、小人の留守を狙って腰紐を白雪姫に売りつける。そして腰紐を締めてあげる振りをして彼女を締め上げ、息を絶えさせる。 やがて帰ってきた7人の小人は、事切れている白雪姫に驚き、腰紐を切って息を吹き返させる。一方、王妃が再び世界一の美女を魔法の鏡に尋ねたことにより、白雪姫が生きている事が露見する。王妃は毒を仕込んだ櫛を作り、再度物売りに扮して白雪姫を訪ねる。白雪姫は頭に櫛を突き刺され倒れるが、小人たちに助けられる。 今度こそ白雪姫を始末したと上機嫌の王妃だが、魔法の鏡の答えで白雪姫の生還を悟る。王妃は、毒を仕込んだリンゴを造り、善良なリンゴ売りに扮して白雪姫を訪ねる。白雪姫は疑いもなくリンゴを齧り、息絶える。 やがて帰ってきた小人たちは白雪姫が本当に死んでしまったものとして悲しみに暮れ、遺体をガラスの棺に入れる。そこに王子が通りかかり、白雪姫を一目見るなり、死体でもいいからと白雪姫をもらい受ける。 白雪姫の棺をかついでいた家来のひとりが木につまずき、棺が揺れた拍子に白雪姫は喉に詰まっていたリンゴのかけらを吐き出し、息を吹き返す。蘇生した白雪姫に王子は喜び、自分の国に連れ帰って妻として迎える。 白雪姫と王子の結婚披露宴の席。王妃は真っ赤に焼けた鉄の靴を履かされ、死ぬまで踊らされる。 </li> </ul>
jQuery
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://hrdtbs.github.io/basic-example-of-html-css-javascript/assets/imsky-holder/holder.min.js"></script>
<script>
$(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')
});
$('.btn').on('click', function () {
$(this).toggleClass('active');
});
});
</script>
CSS
.header{
display: flex;
background-color: grey;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
width: auto;
}
.logo{
justify-content: flex-start;
}
.tab{
display: flex;
padding: 0 1em;
}
.tab li{
justify-content: flex-end;
margin-right:1px;
list-style: none;
padding:5px 25px;
}
.tab li:hover{
color: blue;
}
.content{
width: auto;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.content li{
background:#eee;
list-style: none;
}
#tab1{
background-color: turquoise;
}
#tab2{
background-color: tomato;
display: none;
}
#tab3{
background-color: springgreen;
display: none;
}
.hide {
display:none;
}
回答1件
あなたの回答
tips
プレビュー