2013-05-03 281 views
0

我希望<div class="tcw-content">内的内容改变,当另一个div被点击时,但是我从未使用Ajax(也许它不必在Ajax中完成,但我可以'想想JS/CSS的方式,示例赞赏:)),请问任何人都有我的例子吗?例如,用户将点击<li id="tab-tab_700964" class="grp"><a>Group A</a></li>,一旦点击热点,上述div内的内容就会改变。点击一个div更改另一个div的内容

我该如何做到这一点?

+0

应该是什么内容DISPLA YED?起源在哪里? – 2013-05-03 22:19:50

+0

Ajax可能是您的内容来自哪里的答案,但为了将东西放入div中,请查看javascript DOM函数。 jQuery扩展了这些功能,并为您提供了方便的快捷方式。 – Jerry 2013-05-03 22:19:53

+0

纯JS解决方案是'document.getElementById(“tab-tab_700964”)。innerHTML =“我的新内容”;' – 2013-05-03 22:20:16

回答

3

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

谢谢,那只是我想要的:) – HighFlyerPL185 2013-05-03 22:33:21

+0

不客气 – LRA 2013-05-03 22:36:31

1

去看看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作为沙盒。