| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
タブ切替でコメント欄をコンパクト化
あとで読むはてなブックマーク - タブ切替でコメント欄をコンパクト化 | 2016年11月11日(金) | 2 | 0 | 記事編集

タブ切替でコメント欄をコンパクトに

当ブログのコメント欄ですが…

びふぉ〜。。
【ブログのコメント欄】
【はてなブックマークのコメント欄】
【Facebookのコメント欄】
と、各種コメント欄が縦長にレイアウトされていました。。


基本的に使われているコメント欄は一番上のコメント欄のみ…
はてなブックマークはたまに稼働してますけど。。
Facebookコメントに至ってはほぼ稼働なしだったりします(^^;

んじゃ、いっその事外してしまえば…
なんでしょうけど。。
なんせ物をなかなか捨てられない性格上なんとか残しつつスッキリさせたい…
って事で、タブの切替を使って各種コメント欄をコンパクトにまとめてみようと思います。。

タブですが、jQueryとcssを使ったモノを採用してみました。。

っつ〜事で組んだソースがこちら…

js

<script type="text/javascript">
$(function() {
    $('#comtab .tab_area ul li').click(function() {
        var index = $('#comtab .tab_area ul li').index(this);
        $('.content_block_3').css('display','none');
	        $('.tab_area li').removeClass('selected');
	        $(this).addClass('selected');
       $('.content_block_3').eq(index).css('display','block');
    });
});
</script>

html

<div id="comtab">
    <div class="tab_area">
        <ul>
            <li class="selected">ブログコメント</li>
            <li>Facebookコメント</li>
            <li>はてブコメント</li>
        </ul>
    </div>
    <div class="content_area">
        <div id="contents3_1" class="content_block_3" style="display:block">
          【ブログコメント】
        </div>
        <div id="contents3_2" class="content_block_3" style="display:none">
          【Facebookコメント欄】
        </div>
        <div id="contents3_3" class="content_block_3" style="display:none">
          【はてブコメント欄】
        </div>
    </div>
</div>

CSS

#comtab .tab_area {
    list-style: none;
    margin: 0;
    padding: 0px 0px 0px 10px;
    line-height: 24px;
    position: relative;
    margin: 5px 0px 0px 0px;
}

#comtab .tab_area:before {
    z-index: 1;
}

#comtab .tab_area:after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #AAA;
    z-index: 1;
}

#comtab .tab_area li{
    margin-left: 1px;
    padding: 0 5px;
    border: 1px solid #AAA;
    background: #ECECEC;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
 
#comtab .tab_area ul li:hover {
    background:#AAA;
    color:#ffffff;
    cursor:pointer;
}

#comtab .tab_area li.selected {
    background: #FFF;
    z-index: 2;
    border-bottom-color: #FFF;
}

#comtab .content_area {
    clear: both;
    margin: 5px 0px 0px 0px;
}

※jQuery実装前提のソースになります。

タブ切替でコメント欄をコンパクトに
これでコメント欄がスッキリしましたね♪


参考にさせていただいたサイト一覧

誰でも出来る!プラグインを使わずにjQueryで実装するタブ切り替え機能! | Three & Co. Blog
CSS・jQueryで実装できる「タブ切り替え」3つの方法 | MIGO
jQuery でタブ切り替えコンテンツ | webデザイナーの改造屋ブログ
シンプルなタブ切り替え | Webデザイン・コーディングのmousse Design Lab.(ムースデザインラボ)
jQueryでタブを作る方法あれこれ(短いコードで済むやつ・デザイン変更しやすいやつ) - Qiita
[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル | コリス
2016年11月11日(金) 20:16 | ネット > 改造メモ | 2 | 0 | 記事編集
  • コメント[2]
  • Facebookコメント
  • はてブコメント
  • blogcircleコメント
comment by: 彗星人(仮)
おお
やりますねぇ〜
私もお仕事でjQueryに触れる機会があるんですが、ほぼ「コピペ」のみ・・お恥ずかしい;
一応本は買って勉強する気はあるんですけどねぇ〜・・
ついパズドラッちゃってますww
 
2016年11月11日(金) 21:59
comment by: ひいろん
[彗星人(仮)さん]
お仕事でjQueryってスゴイですね♪
ひいろんはITとは全く無縁な仕事なんで
サイト作りはもっぱらネット頼りでもちろんコピペばかりだったりします(^^;
 
2016年11月12日(土) 08:21
コメントする

icons:

 
トラックバック

まだこの記事へのトラックバックはありません。

ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:400R