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

根据点击切换不同的文本

2 个答案: