根据点击切换不同的文本

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

Answer 2

它通过你的例子中的rgaccordion扩展来解决。

如果你使用TemplaVoila，你可以轻松创建一个FCE which accommodates your markup