タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

jQueryとtabに関するaoiasabaのブックマーク (4)

  • 誰でも出来る！プラグインを使わずに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>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし

    誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！

  • jQuery タブ切り替え | 私的雑録

    $(function () { var index = 0; $('li').click(function() { if (index != $('li').index(this)) { index = $('li').index(this); // タブの内容 $('article').hide().eq(index).fadeIn('fast'); // タブ $('li').removeClass('selected').eq(index).addClass('selected'); } }); });

    aoiasaba
    aoiasaba 2017/07/06
    イニシャルの設定
    リンク

  • [jQuery] ものすごくシンプルなタブメニュー | IT女子のお気に入りフォルダ

    タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。 Result $(function() { $(".tab li").click(function() { var num = $(".tab li").index(this); $(".tabContent").removeClass('active'); $(".tabContent").eq(num).addClass('active'); $(".tab li").removeClass('active'); $(this).addClass('active') }); }); css ul.tab { list-style: none; } ul.tab li { float: left; margin-right: 10px; padding: 10px; backgr

    [jQuery] ものすごくシンプルなタブメニュー | IT女子のお気に入りフォルダ

  • jQueryでタブメニューを実装（画像メニュー版）

    jQueryでタブメニューを実装（画像メニュー版） jQuery2010年8月12日 こちらの記事で、メニュー部分をテキストにて実装するjQueryのスクリプトを紹介させて頂きました。 私も業務でタブメニューを実装する場合はjQueryを使用することが多いのですが、テキストではなくなにかと画像で実装するパターンのほうが多かったりします。実はその場合のスクリプトはまったく違ったものになるので、こちらの記事ではメニューを画像で実装した場合のスクリプトをご紹介します。 jQueryはこちらからダウンロード 実際のサンプル HTML <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="#tab-01"><img src="img/nav-01.gif" alt="" width="80" height="30"/></a><

  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.