常連

### 前提・実現したいこと
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;
}

質問編集履歴