2014-04-30 101 views
0

我在网页上有两段文字,并且希望一次只能看到其中的一段文字。理想情况下,我想通过页面顶部的一组按钮来实现这一点,可能通过JavaScript或jQuery?在两组文本之间切换

编辑:我目前正在使用下面的代码。一切都可见,按钮是'可点击'的,但是当我点击按钮时没有任何反应。

<!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> 
+0

有点多搜索会给你答案:http://stackoverflow.com/questions/14720054/jquery-toggling-between-two-different-divs-on-button-click – gurudeb

+0

欢迎来到SO。请不要在评论中留下冗长的代码。 – isherwood

+0

感谢您的协助。我只是在经过漫长的搜索之后发布的,其中我只找到了预制翻译切换的答案,这并不是我之前的做法。 – user3590219

回答

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> 

我希望这是对你有所帮助。

+0

这看起来不错,我可以在代码中看到它应该做我需要做的事情。不幸的是,当我预览它时,该按钮似乎不起作用。 – user3590219

+0

尝试使用我刚刚编辑的编辑 –

+0

谢谢。我有一个去,但我仍然无法正常工作。请参阅上面的新编辑。我感谢您的帮助。 – user3590219