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 に答える