Eyecatch jQuery

Javascript,jQuery

jQueryでタブの切替スクリプトを書いてみた。

2015/06/05

今回もjQueryネタです。
とりあえずまたも練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。

HTMLは簡単にリストタグでタブ(もどき)を作り、その数だけdivで内容を作成。
divの中身は、本日のyahooのトピックスをコピペ。

CSSもさほど何もせず。

で、JS部分。各行にコメントを付けてみました。
ここまで簡単に書けるものなんですね。改めてjQueryの有用性に驚いてしまいます。

デモ

埋め込み版

デモ:コチラからどうぞ

プラグイン版

プラグイン化もしてみましたので、使用される方はどうぞ。

プラグインデモ:コチラからどうぞ

ダウンロード:
jquery.tgTabChange.zip

最後に

参考にしたルーチンを読み、理解できるようになってきてはいるのですが、実際に書こうと思うと何をどう操れば実現できるのか悩んでしまいます。
慣れもあると思うのですが、さらに理解を進めていきたいところですね。

-Javascript,jQuery
-, , ,