気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
boostrapの既存のレイアウトでは実装は難しいかもしれません。
javascriptを用いて要素を非表示、表示を実装する必要があると思います
簡単な仕組みを説明すると、以下のような感じです。
ソース検証していないので、動かない場合はコメント下さい。
<div class="container-fluid"> <div class="row"> <div class="col-xs-4"><a data-box="box1" href="#">1</a></div> <div class="col-xs-4"><a data-box="box2" href="#">2</a></div> <div class="col-xs-4"><a data-box="box3" href="#">3</a></div> </div> </div> <div class="container-fluid"> <div class="row"> <div id="box1" class="col-xs-12 none">非表示</div> <div id="box2" class="col-xs-12 none">非表示</div> <div id="box3" class="col-xs-12 none">非表示</div> </div> </div>
css .none { display: none; }
jquery $(function(){ $('.row').on('click', 'div>a',function(e){ e.preventdefault(); var id = $(this).attr('data-box'); $('.none').hide(); if(id=='box1'){ $('#box1').show(); }else if(id=='box2'){ $('#box2').show(); }else if(id=='box3'){ $('#box3').show(); } }); });
投稿2016/03/20 17:25
総合スコア59
0
Google画像検索のUIみたいなやつですかね。
以前似たようなUIの実装に迫られた時にいつくかプラグインがありましたよ。
・jQuery.GI.TheWall.js
・jQueryGoogleImgSearchUI
Bootstrapの既存機能では難しいと思われますので、
このあたりを参考にしてご自身で実装されてみてはいかがでしょうか?
投稿2016/03/22 03:23
総合スコア3763
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/03/22 13:46