Question

我在div标记中收集了form个标记，如下所示：

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

我想在可见区域中仅显示div1，而不是在用户按下next时，显示下一个div标记，即div2，依此类推。

我怎样才能做到这一点？

我对可用的不同方法知之甚少，但我对Javascript有一些了解，所以任何想法都会受到赞赏。

P.S。请尽可能提供示例代码，我也想要客户端脚本。

Answer 1

这里有一些可能有帮助的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";


}

Answer 2

如果您将所有元素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或您想要的任何其他机制。

如何逐步显示div标签

2 个答案: