2013-05-03 174 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作爲沙盒。