html - 单击更改段落文本

Question

我一直在使用 javascript(知识非常有限)来交换图像，但现在我想用文本来做。

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

使用代码:

到目前为止，我有我的 CSS 代码来定义我的文本内容(我想根据点击进行更改)和我控制文本更改的 map 内容:

    #content 
    #content div {float:left;}  
    #content_map {width:595px;}     
    #content_text {width:290px;;}
    #content_profile {width:900px;}

到目前为止，我的 map “热点”的 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 上的坐标交换“配置文件”div 中的图像，我想做的是使用这些坐标也交换我的“文本”div 中的文本所以第一组坐标会将我的文本 div 更改为“第 1 段”，第二组坐标会将我的文本 div 更改为“第 2 段”等...

Answer 1

如果您使用的是 jQuery，则可以向每个 area 元素添加一个类，然后像这样定位它:

$(".areaClass").click(function(){
    $("your text div id/class").text("Discover " + $(this).attr("alt"));
});

这是一个例子 http://jsfiddle.net/Vphf2/

我将 area 更改为 anchor 链接，这样它就会显示在屏幕上，但它对你的情况也应该同样有效