タブの切り替えはjavascripを使って実装するのが主流でしょうか？
cssのみでも出来るようなのですが、プロの皆様はどういうやり方でタブ切り替えのUIを作られていますか？
WAI-ARIAでマークアップ+JavaScriptで実装でいこうぜ
blog.e-riverstyle.com/2011/01/waiariahtml5.html
上記記事を参考にすれば良いですか？
CSSでできるなら極力CSSで作っちゃいます。JSはイベント拾うのと、クラスの削除と付加くらいしか使ってないです。アニメーションもCSSでつけてます。その方が動きも滑らかで、構造がシンプルです。
「CSS タブ」で検索をすると、CSSのみでタブUIを実装する方法が開設された記事が幾つか出てくるのですが、お勧めのものというのはございますでしょうか？どうも幾つかデモを試してみると、タブをクリックするとページの一番上にスクロールするため、ガクンとなってしまう印象がありました。
たぶんaタグのhrefに＃入れてるんでしょう。href="javascript:void(0)"とか、hrefのイベント解除しとけば大丈夫かと。
なるほど！ありがとうございます^ ^
プロはタブなんかで悩まない
CSSでタブ実装は、:targetかinputでの実装になるのかな。:targetは、履歴に出ちゃうのでユーザーに嫌われる場合も多いし、inputは、ソースが汚れるからという理由で嫌うコーダーがいるな。俺は、classのon/offのところだけJS使うかな。ちなみに、「プロ」って書くのやめようぜ。プロを名乗る奴にロクな奴いないから。お金もらう以上はみんなプロなんだし。
先日実務で input 方式のタブ実装してみたんですが、あれは面倒ですね。ソース的にもなんだか "力技で実装しました" 感が出てて作り終わった後でファイル全て消しちゃいました。
結局、jQuery で実装するのが一番楽かなーと思います。$.fn.tabs みたいにプラグイン化しておけば使い回しも効きますし。
僕はいつも $container.trigger( ’tabs’, [ ... ] ); みたいに独自イベントも込みで実装してます。
みんなの回答 5 件
WAI-ARIAでマークアップ+JavaScriptで実装でいこうぜ
CSSでできるなら極力CSSで作っちゃいます。
JSはイベント拾うのと、クラスの削除と付加くらいしか使ってないです。
アニメーションもCSSでつけてます。その方が動きも滑らかで、構造がシンプルです。
プロはタブなんかで悩まない
CSSでタブ実装は、:targetかinputでの実装になるのかな。
:targetは、履歴に出ちゃうのでユーザーに嫌われる場合も多いし、inputは、ソースが汚れるからという理由で嫌うコーダーがいるな。
俺は、classのon/offのところだけJS使うかな。
ちなみに、「プロ」って書くのやめようぜ。プロを名乗る奴にロクな奴いないから。お金もらう以上はみんなプロなんだし。
先日実務で input 方式のタブ実装してみたんですが、あれは面倒ですね。
ソース的にもなんだか "力技で実装しました" 感が出てて作り終わった後でファイル全て消しちゃいました。
結局、jQuery で実装するのが一番楽かなーと思います。
$.fn.tabs みたいにプラグイン化しておけば使い回しも効きますし。
僕はいつも $container.trigger( ’tabs’, [ ... ] ); みたいに独自イベントも込みで実装してます。
関連するトピックス