单击一个 div 会更改另一个 div 的内容答案

【问题标题】：Clicking a div changes another div's content单击一个 div 会更改另一个 div 的内容
【发布时间】：2013-05-03 22:15:06
【问题描述】：

我希望<div class="tcw-content"> 中的内容在单击另一个 div 时更改，但是我从未使用过 Ajax（也许它不必在 Ajax 中完成，但我想不出 JS /CSS 方式，示例赞赏 :) )，有人可以给我任何示例吗？比如用户点击<li id="tab-tab_700964" class="grp"><a>Group A</a></li>，一旦点击热点，上面提到的div里面的内容就会发生变化。

我怎样才能做到这一点？

【问题讨论】：

应该显示什么内容？原产地在哪里？
Ajax 可能是您的内容来自何处的答案，但要将内容放入 div，请查看 javascript DOM 函数。 jQuery 扩展了这些功能并为您提供了方便的快捷方式。
纯JS解决方案是document.getElementById("tab-tab_700964").innerHTML="<a>My New Content</a>";

标签： javascript html css ajax

【解决方案1】：

你可以使用jQuery，例如：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#tab-tab_700964 a').on('click', function(){
      $('.tcw-content').html('hey');
    }); 
});
</script>

<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
    hello
</div>

【讨论】：

【解决方案2】：

去看看jQuery。它使这很容易。您的示例如下所示：

$('.grp a').click(function(e) {
    e.preventDefault();
    $('.tcw-content').html('new content goes here');
});

解释一下，$ 是 jQuery 对象。当您将它用作带有字符串的函数时，它会查找与该选择器匹配的所有元素，几乎与 CSS 选择器的工作方式完全相同。然后，您可以对这些匹配的元素调用各种函数。在这种情况下，我们调用click() 并传递一个函数，该函数将在单击链接时运行。在该函数内部，我们使用 $('.tcw-content') 找到 div 并使用 html() 函数更新其内容。

jQuery 的documentation 相当不错。开始玩吧，也许使用jsFiddle 作为沙盒。

【讨论】：

【解决方案3】：

也许您正在寻找内容滑块。

HTML Content Slider

:: Featured Content Slider v2.5

Examples

40 examples

【讨论】：

【解决方案4】：

用 jquery 来做。包含 jquery 库，然后添加一个带有 document.ready 事件的新 javascript 文件。在准备好的文档中，只需添加一些内容以在单击 div 时进行监听。在这里阅读：

http://www.w3schools.com/jquery/event_click.asp

http://api.jquery.com/click/

【讨论】：