-
ID:kDg/lw さんの質問

タブの切り替えはjavascripを使って実装するのが主流でしょうか?

cssのみでも出来るようなのですが、プロの皆様はどういうやり方でタブ切り替えのUIを作られていますか?

みんなの回答 5 件

ID:lne3yz さんの回答

WAI-ARIAでマークアップ+JavaScriptで実装でいこうぜ

ID:8GxgCF

blog.e-riverstyle.com/2011/01/waiariahtml5.html

上記記事を参考にすれば良いですか?

ID:FwvAyl さんの回答

CSSでできるなら極力CSSで作っちゃいます。
JSはイベント拾うのと、クラスの削除と付加くらいしか使ってないです。
アニメーションもCSSでつけてます。その方が動きも滑らかで、構造がシンプルです。

ID:8GxgCF

「CSS タブ」で検索をすると、CSSのみでタブUIを実装する方法が開設された記事が幾つか出てくるのですが、お勧めのものというのはございますでしょうか?どうも幾つかデモを試してみると、タブをクリックするとページの一番上にスクロールするため、ガクンとなってしまう印象がありました。

ID:FwvAyl

たぶんaタグのhrefに#入れてるんでしょう。
href="javascript:void(0)"とか、hrefのイベント解除しとけば大丈夫かと。

ID:kDg/lw

なるほど!ありがとうございます^ ^

ID:luI8zU さんの回答

プロはタブなんかで悩まない

ID:lZEptS さんの回答

CSSでタブ実装は、:targetかinputでの実装になるのかな。
:targetは、履歴に出ちゃうのでユーザーに嫌われる場合も多いし、inputは、ソースが汚れるからという理由で嫌うコーダーがいるな。
俺は、classのon/offのところだけJS使うかな。
ちなみに、「プロ」って書くのやめようぜ。プロを名乗る奴にロクな奴いないから。お金もらう以上はみんなプロなんだし。

ID:Tq8DHO さんの回答

先日実務で input 方式のタブ実装してみたんですが、あれは面倒ですね。
ソース的にもなんだか "力技で実装しました" 感が出てて作り終わった後でファイル全て消しちゃいました。

結局、jQuery で実装するのが一番楽かなーと思います。
$.fn.tabs みたいにプラグイン化しておけば使い回しも効きますし。

僕はいつも $container.trigger( ’tabs’, [ ... ] ); みたいに独自イベントも込みで実装してます。

最終更新日:2014-09-02 (3,156 views)

関連するトピックス

ページ上部に戻る