質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

  • jQuery

    7113questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4305questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2215questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

タブバーの実装 jQuery

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 156

tsuyo244s

score 25

 前提・実現したいこと

html,css,jQueryでタブバーを作っています。
jQueryの書き方がわからないです。
初めての質問です。
よろしくお願いします。

 該当のソースコード

html,css,jQuery

ソースコード
html
<header class="header">
<p class="logo">Stories</p>
<ul class="tab">
<li class="select" class="btn">桃太郎</li>
<li class="btn">シンデレラ</li>
<li class="btn">白雪姫</li>
</ul>
</header>
<ul class="content">
<li id="tab1">桃太郎(ももたろう)は、日本のおとぎ話の一つ。 「桃太郎」が、お婆さんから黍団子(きびだんご)をもらって、イヌ、サル、キジを従えて、鬼ヶ島まで鬼を退治しに行く物語。日本の五大昔話の一つ。桃の中から生れた桃太郎が犬,さる,きじを連れて鬼ヶ島に行き鬼を退治する。成立は室町時代であろうが,文献としては江戸時代初期のものが最も早い。話の成立には「瓜子姫」や「一寸法師」など異類誕生の民間説話や「御曹子島渡」なども関係があるといわれる。享保年間
(1716~36) に赤本『桃太郎』が出,続いて黄表紙,合巻に取入れられて流布し,明治になっておとぎ話として書直された。 桃太郎の物語は、いくつかの場面で出典により違いがある。ただし、物語後半にある鬼との戦いの場面では、おおむねどの書籍でも桃太郎側の視点での勧善懲悪物語となっている。
桃太郎の出生に関しては、桃から生まれたとする場合や、桃を食べたお爺さんの生まれ変わりだとする場合がある。 桃太郎の成長過程については、お爺さんとお婆さんの期待通り働き者に育ったとする場合や、三年寝太郎のように力持ちで大きな体に育つが怠け者で寝てばかりいるとする場合がある。
成長した桃太郎は、鬼ヶ島の鬼が人々を苦しめていることを理由に鬼退治に旅立つが、その決意を自発的に行う場合と、村人や殿などに言われて受動的に行う場合とがある。 出征時には両親からきび団子を餞別にもらう。道中、遭遇するイヌ、サル、キジにそのきび団子を分け与えて家来にする。
鬼ヶ島での鬼との戦いで勝利をおさめ、鬼がほうぼうから奪ってきた財宝を持って帰り、最終的に郷里のお爺さん・お婆さんの元に帰って幸せに暮らしたとして物語は締めくくられる。
</li>
<li class="hide" id="tab2">シンデレラ (英: Cinderella) は、童話の一つ。また、その主人公。仏語で『サンドリヨン(仏: Cendrillon)』。和名は『灰かぶり姫』あるいは『灰かぶり』。 グリム兄弟によるアシェンプテル (Aschenputtel)
、シャルル・ペローによるものが知られているが、より古い形態を残していると考えられている作品としてジャンバッティスタ・バジーレの『ペンタメローネ(五日物語)』に採録されたチェネレントラ (Cenerentola) が挙げられる。日本の落窪物語や、中国にも楊貴妃がモデルと言われる掃灰娘や、民話に基づいていると思われる唐代の小説「葉限」などの類話があるなど、古くから広い地域に伝わる民間伝承である。日本ではペロー版が有名である。
オペラ・バレエ・映画・アニメなど様々な二次作品が作られている。 なお、英語: cinder 、フランス語: cendre 、ドイツ語: Asche 、イタリア語: cenere などはいずれも「燃え殻」「灰」を意味し、上述の各作品名はこれらの派生形である。和訳名の『灰かぶり姫』もこれらを汲んだものである。
世界中にシンデレラのバリエーションと言える話が残っている。 現在知られている中で最も古い記録の一つに、ギリシャの歴史家ストラボンが紀元前1世紀に記録したロードピスの話がある。それは以下のような話である。 エジプトのお屋敷に、美しい女奴隷ロードピスが住んでいた。主人は優しい人だったが多くの召使いにじゅうぶん目が届かず、肌が白く外国人のロードピスは周りの女召使いからよくいじめられていた。
あるとき、ロードピスが上手に踊るのを見た主人はロードピスに美しいバラの飾りの付いたサンダルを贈った。するとほかの女召使いたちは、ロードピスに嫉妬していっそう彼女につらく当たるのだった。 その後、エジプトの王様(ファラオ)が民衆を都に招き、大きなお祭りを催した。女召使いたちはそのお祭りに出掛けていったが、ロードピスにはそのお祭りに行けないようにたくさんの仕事を言いつけた。仕方なく言いつけどおりオルモク川で服を洗っていると、バラのサンダルを誤って濡らしてしまう。そこでそれを岩の上で乾かしていると隼(はやぶさ)が持っていってしまい、それをメンフィスにいる王様の足元に落とした。その隼がホルス神の使いだと考えた王様は、国中からそのサンダルに合う足の娘を探し、見つかったら結婚すると宣言した。
王様の船がロードピスの住むお屋敷にやってくると、ロードピスははじめ身を隠してしまったが、サンダルを履かせるとぴったり合った。またロードピスが残していたサンダルの片割れも見つかり、王は宣言どおり、ロードピスと結婚した[1]。

</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;
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tsuyo244s

    2018/06/08 18:29

    動きました!ありがとうございます!

    キャンセル

  • kei344

    2018/06/08 19:45

    まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

    キャンセル

  • tsuyo244s

    2018/06/08 20:49

    了解しました!

    キャンセル

回答 1

check解決した方法

0

正しいコードが書けていました。
ご協力ありがとうございました!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • jQuery

    7113questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4305questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2215questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。