jQuery系のtabでは、jQuery UIを使ったものが指示通りにjsファイルなどを読み込むことで、簡単に設置できますが、デザインのカスタマイズに難があります。その点、シンプルな構造のこのtabなら、自由に変更可能です。

次のサンプルは、tab部分をクリックすると、それに合わせて下側の文言が変化します。

実例サンプル

インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。概要説明、操作マニュアル発注側、管理側を参照してください。

 

htmlソース

    <ul class="Btn">
        <li id="B1" class="active">百万石&nbsp;BtoB&nbsp;WEB受注システム</li>
        <li id="B2">0万石&nbsp;WEB&nbsp;受注システム</li>
        <li id="B3">定期配達・回収品管理システム</li>
        <li id="B4">0万石&nbsp;在庫照会システム</li>
        <li id="B5">QRラリー&reg;&nbsp;カスタムパック</li>
    </ul>
    <div class="contents">
        <p>インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。概要説明、操作マニュアル発注側、管理側を参照してください。</p>
    </div>

jsソース

  $(".Btn li").click(function(){
  cm = Number($(this).attr("id").replace("B",""));
  $(".Btn li").removeClass("active");
  $("#B" + cm).addClass("active");
  if (cm == 1){
   $(".contents p").html("インターネットを利用した受注システムです(SaaS版、ASP版)。既存の販売管理、基幹システムとのデータ連携が可能です。概要説明、操作マニュアル発注側、管理側を参照してください。");
  } else if(cm == 2){
   $(".contents p").html("初期費用・月額費用(規定条件内なら)無料! WEBからお申し込み頂くだけでご利用可能。マニュアル無しですぐに使えます。多くの企業様にご利用頂き、高い評価を得ている「百万石 WEB受注システム」の基本機能がそのまま使えます。ご利用後、カスタマイズの必要性が出てきた場合、「 百万石 WEB受注システム」への移行も可能です。スマホ・タブレットからも発注できます。Windows、Mac両対応です。");
  } else if(cm == 3){
   $(".contents p").html("定期的に得意先へ配達・回収を行なっている企業様の「受注業務のWEB化」と、ドライバーへ「配達指示・回収数報告を効率的に管理」するシステムです。電話・FAX・メールでの発注をWEB発注に切り替える事によって、御社の受注業務の手間と、人的コストの大幅な削減に貢献いたします。受注データを元にした配送手配や、配送リストをドライバーへ提供することも可能です。取引先にシステム利用を要請する際に、先方にインターネット接続環境が整っていれば新たな費用負担は不要です。");
  } else if(cm == 4){
   $(".contents p").html("会社の在庫状態が、無料で照会できるサービスです。件数は無制限で登録可能(登録数に関係なく 無料)。管理者用IDを1アカウントと、在庫照会用IDを1アカウント発行可能です。在庫データのアップロード機能(ファイルの項目は弊社仕様をご利用ください。ファイル形式:CSV)。在庫データのダウンロード機能(ファイル形式:CSV、管理者のみ使用可能)。カテゴリー・商品コード・商品名などで検索が可能。ページビュー数の確認が可能(管理者のみ使用可能)。");
  } else if(cm == 5){
   $(".contents p").html("QRラリーは 携帯電話のQRコード(2次元コード)読み取り機能を利用して、携帯ラリー(スタンプラリー)イベントを開催するシステムです。従来の携帯電話、スマートフォン(iPhoneやAndroidなど)どちらでもご利用いただけます。開催するイベントのその場で、福引きやプレゼント応募が可能です。イベント用のケータイHPの作成が可能です。イベント参加者に対してアンケート調査が可能です。イベント参加者に対してメールマガジンの配信が可能です。メールマガ ジンはリピーター獲得に有効な手段のひとつです。(メールマガジンを取 得する場合のみ、可能です)");
  }
 });