Question

我在网页上有两段文字，并希望一次只能看到其中一段。理想情况下，我想通过页面顶部的一组按钮实现此目的，可能通过javascript或jquery？

编辑：我目前正在使用以下代码。一切都是可见的，按钮是可点击的＆＃39;但是当我点击按钮时没有任何反应。

<!DOCTYPE html>
<html>
<body>

<h1>What OCA should do next</h1>

<div id='Content'>
<div id='1'><p>THIS IS TEXT 1</p></div>
<div id='2' style='display:none;'><p>THIS IS DEFINITELY NOT TEXT 1</p></div>
</div>

<button type="submit" value="Submit">Submit</button>
<script>
var shown = 1;
$("#Submit").click(function() {
   if(shown == 1) {
      $("#text1").css("display", "none");
      $("#text2").css("display", "block");
      shown = 2;
   } 
   else {
      $("#text2").css("display", "none");
      $("#text1").css("display", "block");
      shown = 1;
   }
});
</script>
</body>
</html>

Answer 1

您可以将它们放在内容div中的不同div中，并在不同的时间显示它们：

<div id='Content'>
   <div id='text1'><p>THIS IS TEXT 1 </p></div>
   <div id='text2' style='display:none;'><p>THIS IS DEFINITELY NOT TEXT 1 </p></div>
</div>
<a id='changeText'>CHANGE</a>
<!-- Style the <a> To make it look like a button -->
<script>
   var shown = 1;
   $("#changeText").click(function() {
       if(shown == 1) {
          $("#text1").css("display", "none");
          $("#text2").css("display", "block");
          shown = 2;
       } else {
          $("#text2").css("display", "none");
          $("#text1").css("display", "block");
          shown = 1;
       }
   });
</script>

我希望这对你有所帮助。

在两组文本之间切换

1 个答案: