【jQuery 備忘録】ページを変えないで表示 タブで切り替えるデザイン

こんにちはrey( @reydesign8376) です

多くなってしまった情報を見やすいようにしたい時、ページを増やす方法もありますが
ページを変えないでまとめるのもサイトをすっきりさせてくれます
その方法にタブクリックでコンテンツを切りかる方法があります

切り替えはjQueryで作っていきます〜

では早速〜

↑こんなん!
目次

jQuery UIをダウンロード

jQueryはプラグインやユーザーインターフェイスの部品があり必要に応じてダウンロードします
ありがたくダウンロードさせて頂きます😌

あわせて読みたい
Download Builder | jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building h...

「Tabs」にチェックを入れてダウンロード

ダウンロードしたデザインはこんな感じです
こちらを元にアレンジさせて頂きます

アレンジしたコードはこちら

    <div id="tabs">
        <h2 class="demoHeaders">吾輩は猫である</h2>
        <ul>
            <li><a href="#tabs-1">日本語</a></li>
            <li><a href="#tabs-2">英語</a></li>
            <li><a href="#tabs-3">ペルシャ語</a></li>
        </ul>
        <div id="tabs-1">
            吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。
        </div>

        <div id="tabs-2">
            I am a cat. There is no name yet. I have no idea where I was born. I remember only crying in a dim and damp
            place. I saw human beings for the first time here. Moreover, I heard later that it was the most evil race of
            human beings called Shosei. This shosei is a story about catching us from time to time and eating it in a
            boil. However, at that time, I had no idea whatsoever, so I didn't think it was particularly scary. However,
            when it was placed on the palm of his palm and lifted up, it just felt fluffy. It is probably the beginning
            of what is called a human being that he calms down a little on his palm and sees the face of the student.
            The feeling that I thought was strange at this time still remains. The face, which should have been
            decorated with the first hair, was slippery and was like a kettle.
        </div>

        <div id="tabs-3">
            من یک گربه هستم. هنوز نامی وجود ندارد. نمی دانم کجا به دنیا آمده ام. یادم می آید فقط در یک مکان تاریک و
            مرطوب گریه می کردم. من برای اولین بار انسان را اینجا دیدم. بعلاوه بعدا شنیدم که بدترین نژاد بشر به نام شوسی
            بوده است. این شوسه حکایتی است که هر از گاهی ما را می گیرند و در جوش می خورند. با این حال، در آن زمان، من هیچ
            ایده ای نداشتم، بنابراین فکر نمی کردم که به خصوص ترسناک باشد. با این حال، وقتی روی کف دستش قرار گرفت و بلند
            شد، فقط احساس کرکی داشت. احتمالاً آغاز چیزی است که به آن انسان می گویند که کمی روی کف دستش آرام می گیرد و
            چهره شاگرد را می بیند. احساسی که در این زمان به نظرم عجیب بود هنوز باقی است. صورت که باید با موی اول تزئین
            می شد، لیز بود و مانند کتری بود.
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <script>
        $("#tabs").tabs();
        $("#dialog-link, #icons li").hover(
            function () {
                $(this).addClass("ui-state-hover");
            },
            function () {
                $(this).removeClass("ui-state-hover");
            }
        );
    </script>

htmlのbodyの中に記述します

ではではサイト制作にお役立てくださいませ〜

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次