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 演示。增加当前整数。你也可以用 -- for back 来减少。有很多方法可以做到这一点。这只是我想到的一个。

<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 回答