javascript - 单击一个 div 会更改另一个 div 的内容

Question

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

我怎样才能做到这一点？

score 3 · Accepted Answer

您可以使用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>

score 1 · Accepted Answer

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

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

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

jQuery 的文档非常好。开始玩它，也许使用jsFiddle作为沙箱。