0

コンテナー div 内には、常に 1 つだけが表示されるようにオーバーレイしたい 4 つの div があります。これらの 4 つの div はそれぞれ同じサイズです - 200x200px としましょう。オーバーレイされた div の右側に、オーバーレイされていない 4 つの垂直方向に配置された小さな div が必要です。それぞれの高さは 50 ピクセルです。これらの 4 つの垂直方向に配置された div は単純なメニューとして機能するため、クリックすると、左側に重なった 4 つの div の関連する div が表示されます。

理想的にはjqueryを使用して、これに対する最も簡単な解決策を見つけようとしています。私はいくつかのことをいじりましたが、jqueryに関する私の知識は仕事に十分ではありません.

解決策または単にさらに調査する方法に関するヒントをいただければ幸いです。これはワードプレスのテーマの一部として展開される予定なので、まさにこれを行うプラグインを誰かが知っていれば、それは素晴らしいことですが、私はそうは思わない.

どうもありがとう。

4

3 に答える 3

0

TABS フォーム Jquery UI をお探しですか? http://jqueryui.com/tabs/#vertical

JSFIDDLEでの作業例

$(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });

CSS

.ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
于 2013-05-08T16:38:50.923 に答える