誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）|WD Online
2016.01.04 課題解決のためのUI実装講座 Web Designing 2016年1月号 カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2） スワイプ対応タブメニューを実装してみよう Text：町田なつみ、古川佑太朗 スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。 サンプルファイルダウンロードのご案内 このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。 ［SWIPE TAB 01］タブ部分を配置し横スクロールに対応させる それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
