0

ページの両側にあるフレームセットに2つのフレームがあるプロジェクトを作成しています。左側のフレームを「左」、右側のフレームを「右」と呼びます。左側のフレームに「非表示/表示」ボタンを割り当てようとしています。そのボタンは左側のフレームに割り当てられ、左側のフレームを非表示にして、右側のフレームを広くします。検索してみましたが、解決策がありませんでした。

私はこのウェブデザインに慣れていないので、誰かが私に助けを貸してくれたら光栄です。私は物事をあまり複雑にしないことを望みます。

ありがとう、あなたの親切な返事を楽しみにしています........。

4

1 に答える 1

1

他の人が言及しているように、フレームはおそらくあなたを困らせるでしょう。最も簡単な方法は、おそらく 2 つの列を div でラップすることです。タグのクラスは、<body>両方の幅と可視性を決定します。一番左の列を「非表示」および「表示」するプロセスは、javascript を使用して body タグにあるクラスを切り替えるだけです。

簡単な例を次に示します。

<body class="two-col">
  <div class="sidebar">
    <a id="hide-sidebar">Hide</a>
    Left
  </div>
  <div class="main">
    Right
  </div>
</body>

body.two-col .sidebar {
  width: 25%;
  position: absolute;
  top: 0;
  left: 0;
}

body.two-col .main {
  width: 75%;
  margin-left: 25%;
}

body.one-col .sidebar {
  display: none;
}

$('#hide-sidebar').click(function() {
  body = $('body');
  if (body.hasClass('one-col')) {
    body.addClass('two-col').removeClass('one-col');
  } else {
    body.addClass('one-col').removeClass('two-col');
  }
});
于 2013-01-09T22:01:00.803 に答える