3

次のように、タグにタグのコレクションがありdivますform。

<form ...>
  <div id="div1"> ... </div>
  <div id="div2"> ... </div>
  ...
  ...
</form>

div1ユーザーが を押したときnextや、次の div タグが表示されたときなど、可視領域のみに表示したいdiv2。

どうすればこれを達成できますか？

これを行うために利用できるさまざまなアプローチについてはあまり知識がありませんが、Javascript についてはある程度の知識があるので、どんなアイデアでも大歓迎です。

PS 可能であればサンプル コードを提供してください。クライアント側のスクリプトも必要です。

4

2 に答える 2

6

これが役立つかもしれないいくつかのjavascriptとhtmlのデモンストレーションです。現在の整数をインクリメントします。-を使用してデクリメントすることもできます。これを行うには多くの方法があります。これは私が考えたものです。

<img src="mynextbutton.jpg" onclick="showNext()" />
<form ...>
  <div id="Div0" style="display:inherit;"> ... </div>
  <div id="Div1" style="display:none;"> ... </div>
  <div id="Div2" style="display:none;"> ... </div>
  ...
  ...
</form>

//---------------------------------------------------

var currentDiv = 0;
function showNext()
{
     document.getElementById("Div"+currentDiv).style.display = "none";
     currentDiv ++;
     document.getElementById("Div"+currentDiv).style.display = "ihherit";


}
于 2012-05-07T19:36:41.893 に答える
1

すべての要素IDを配列に入れ、それを使用して次のアイテムを取得すると、ID番号への依存を取り除き、それらが回転する順序を決定し、そのような厳密な形式に従う必要がなくなるようにすることができます。 。

//add all element IDs to this array
var elements = ["firstElementID","div2","someConentsID","lastElementID"]; 
var currentIndex = 0;

//ensure that the first item is visible at the start.

function next()
{
  //hide current item.
  document.getElementById(elements[currentIndex]).Style = "display:none";
  //move up the current index by one, wrapping so as to stay within array bounds.
  currentIndex = (currentIndex + 1) % elements.length;
  //show the new current item.
  document.getElementById(elements[currentIndex]).Style = "display:inline";
}

表示/非表示コードを調整して、JQueryやその他の必要なメカニズムを使用できます。

于 2012-05-07T19:53:43.703 に答える