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's .html。您可能还希望.text有效。

Answer 2

在每个超链接上点击功能，如下所示：

<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;
}

如何更改div内容

2 个答案: