0

我在这个主题上做了很多搜索，发现了很多不同的方法。虽然有些接近，但我还没有找到我要找的东西。

基本上，我在 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);
      }
 });
}
4

2 回答 2

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"));
});

示例小提琴

于 2012-04-11T14:34:26.173 回答
0

您的示例中的rgaccordion扩展解决了这个问题。

如果您使用的是 TemplaVoila，您可以轻松创建一个适合您的标记的 FCE

于 2012-04-11T21:13:36.947 回答