javascript - 如何更改 div 内容

Question

我正在制作一个足球网站，左侧会有一个导航窗格。当您单击其中一个选项卡时，它将显示相应的视频，希望通过 javascript。我希望在同一个 html 文件中完成此操作，因此不必重新加载。

这是导航栏的代码：

    <div class="highlights"><a><p>MATCH HIGHLIGHTS</p></a> </div>

        <a href="#"><div class="win">
            <div class="match"><p>Cardiff</p></div>
            <div class="score"><p>1-2</p></div>   
        </div></a> 
        <a href="#"><div class="loss">
            <div class="match"><p>Everton</p></div>
            <div class="score"><p>3-2</p></div>   
        </div></a> 
        <a href="#"><div class="win">
            <div class="match"><p>Leeds</p></div>
            <div class="score"><p>2-0</p></div>   
        </div></a> 
        <a href="#"><div class="loss">
            <div class="match"><p>Hull</p></div>
            <div class="score"><p>2-3</p></div>   
        </div></a> 

然后内容将进入此 div：

<div id="content">      content goes here        </div>

Answer 1

我建议你阅读 jQuery。这里有一个很好的参考来改变 HTML 内容，允许你添加粗体、强调等。jQuery 的.html. 您可能还想.text工作。

Answer 2

在每个超链接上执行 onclick 函数，如下所示：

<a href="javascript:;" onclick="showGoals(1);"><div class="win">
            <div class="match"><p>Cardiff</p></div>
            <div class="score"><p>1-2</p></div>   
        </div></a> 


function showGoals(matchId) {
$.ajax({
success : fumction (data) {
$('#content').val(data);
}
});
return false;
}