Question

我一直在使用javascript（知识非常有限）来交换图片，但现在我想用文字来做。

我的问题是，如果我有10个不同的段落（链接1显示第1段，链接2显示第2段等），我不明白我可以在哪里'键入'它们。我的图像显然链接到一个现成的文件，但我希望我的文本保留为文本，我不知道如何在CSS或HTML等中分配它。

使用代码：

到目前为止，我有我的CSS代码来定义我的文本内容（我想根据点击更改）和我控制文本更改的地图内容：

    #content 
#content div {float:left;}  
#content_map {width:595px; height: 595px; margin-bottom: 15px; margin-right:15px;}      
    #content_text {width:290px; height: 595px; margin-bottom: 15px;}
#content_profile {width:900px; height: 755px; margin-bottom: 15px;}

所以到目前为止我的html地图'热点'就是一个例子：

  <area shape="circle" coords="276,326,15" href="#" alt="Kinnloch" onclick="MM_swapImage('stboswells_01','','discover_kinnloch.png',1)"/>
  <area shape="circle" coords="202,264,11" href="#" alt="Lochinver" onclick="MM_swapImage('stboswells_01','','discover_lochinver.png',1)"/>

... 等

所以基本上我用“map”div上的坐标交换'profile'div中的图像，我想要做的就是使用这些坐标在我的'text'div中插入文本，这样第一组coords会改变我的文本div来说'Discover Kinnloch'，第二组坐标会改变我的文本div来说'Discover Lochinver'等...

Answer 1

听起来你想要扩展部分。

您可以将CSS中已隐藏的内容隐藏起来，并通过javascript显示。这是使用jQuery的一个例子。

<div class="container">
     <a href="#">Header 1</a>

    <p class="container-body">This is a test.</p>
</div>
<div class="container">
     <a href="#">Header 2</a>

    <p class="container-body">This is another test.</p>
</div>

CSS隐藏：

.container-body {
    display: none;
}

由JavaScript切换：

$(".container a").click(function () {
    $(".container-body", $(this).parent()).slideToggle();
});

这是一个快速的小提示，展示了它的实际效果：http://jsfiddle.net/yv9QG/

或者，如果您正在谈论在目标空间中交换文本，那么只需进行一些小的更改，您最终会得到以下内容：http://jsfiddle.net/yv9QG/1/

通过段落迭代

1 个答案: