javascript - 根据点击切换不同的文本

Question

我对这个主题进行了大量搜索，发现了大量不同的方法。虽然有些接近，但我还没有找到我要找的东西。

基本上，我在 Typo3 中工作，我正在尝试创建一些链接，单击这些链接时将更改显示在链接下方给定区域中的文本。单击新链接时，我希望以前的文本被新信息链接中的信息覆盖。

理解我在说什么的一种更简单的方法是考虑一个图片库，只不过不是显示图片，而是更改文本。如果我不够具体，请告诉我。什么都有帮助。

更新:我正在尝试做一些与您在此页面上看到的非常相似的事情。除非 div 在悬停时变得可见，否则文本会显示并保持 OnClick 状态，直到做出下一个选择。

使用此代码进行悬停，但需要它是 OnClick 才能显示。

<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
<style type="text/css">
#Style {
position:absolute;
left:218px;
top:300px;
visibility:hidden;
border:none 1px #CCC;
padding:5px;

}
</style>

<div id="CC1" style="position:absolute; left:30px; top:472px;"><a href="#" STYLE="TEXT-DECORATION: NONE" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><center><h1 style="color:white; font-size:125%;">Lorum Ipsum<center></a></div>
<div id="Style"><img src="http://www.example.org/fileadmin/template/images/CCSS/TextBox.png"><div style="position: relative;top:-285px;font:12pt;font-weight:bold;color: #0067b2;margin-left: 15px;width:280px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>

---

我设法使用这段代码获得了我想要的效果。现在我唯一的问题是，当页面第一次加载时，所有 div 都会显示，直到单击一个。想法？

function showonlyone(thechosenone) {
 $('div[name|="newboxes"]').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
      else {
           $(this).hide(600);
      }
 });
}

Answer 1

以下是如何实现这一目标的简单示例。您没有具体说明新文本的来源，所以我只使用了 data-* 属性。您可以将其更改为您需要的任何内容 - 无论是另一个元素、AJAX 调用等。

<p id="message"></p>    
<a href="#" data-text="Message #1" class="link">Show message #1</a><br>
<a href="#" data-text="Message #2" class="link">Show message #2</a><br>
<a href="#" data-text="Message #3" class="link">Show message #3</a><br>
<a href="#" data-text="Message #4" class="link">Show message #4</a><br>
<a href="#" data-text="Message #5" class="link">Show message #5</a><br>

$(".link").click(function() {
   $("#message").text($(this).data("text"));
});

Example fiddle