Javascript 单击“隐藏”并打开所选内容

有一个密码

html

<a href="#" id="show_spoiler" onClick="showContent('video.php#01')">Видео 1</a> <a href="#" id="hide_spoiler" onClick="hideContent()" style="display: none">Закрыть видео</a> <div id="content"></div> <div id="loading" style="display: none">Идет загрузка...</div>

<a href="#" id="show_spoiler" onClick="showContent('video.php#02')">Видео 2</a> <a href="#" id="hide_spoiler" onClick="hideContent()" style="display: none">Закрыть видео</a> <div id="content"></div> <div id="loading" style="display: none">Идет загрузка...</div>

问题是按下任何一个按钮都会“打开”：第一个按钮只会做出反应，它下面会显示所有按钮的内容。请帮忙，每个按钮的内容都是。。。提前感谢。

ID属性为。对于多个浏览器，响应甚至不太可能是远程跨浏览器的，甚至不太可能是相同的浏览器版本

更好的方法是：

HTML:

---

我很好奇为什么您要使用复杂的AJAX查询而不是jQuery尼斯simple？

我被指派编写部分网站，而正常研究的时间却没有。如果我在代码中犯了最简单的错误，我也很抱歉。是的，我很清楚时间的缺乏是导致如此多的简单错误的原因，这些错误会造成如此多的麻烦；）

function showContent(link) {
    var cont = document.getElementById('content'); 
    var loading = document.getElementById('loading');
        $('#hide_spoiler').css('display','block');
        $('#show_spoiler').css('display','none');
    cont.innerHTML = loading.innerHTML;
    if( http )  
    { http.open('get', link);
        http.onreadystatechange = function ()  
        {   if(http.readyState == 4)  
            {   cont.innerHTML = http.responseText;  }    } 
        http.send(null);
        } 
    else  
    {  document.location = link;   }  } 
// ajax объект
function createRequestObject()  
{  try { return new XMLHttpRequest() } 
    catch(e)  
    {  try { return new ActiveXObject('Msxml2.XMLHTTP') } 
        catch(e)  
        {   try { return new ActiveXObject('Microsoft.XMLHTTP') } 
            catch(e) { return null; }   } } }

    function hideContent() { 
    var cont = document.getElementById('content');
        $('#hide_spoiler').css('display','none');
        $('#show_spoiler').css('display','block');
    cont.innerHTML = '';   
    } 
// ajax объект

<a href="#" id="show_spoiler_1" onClick="showContent('video.php#01',1)">Видео 1</a>
<a href="#" id="hide_spoiler_1" onClick="hideContent(1)" style="display: none">Закрыть видео</a>
<div id="content_1"></div>
<div id="loading_1" style="display: none">Идет загрузка...</div>

<a href="#" id="show_spoiler_2" onClick="showContent('video.php#02',2)">Видео 2</a>
<a href="#" id="hide_spoiler_2" onClick="hideContent(2)" style="display: none">Закрыть видео</a>
<div id="content_2"></div>
 <div id="loading_2" style="display: none">Идет загрузка...</div>

function showContent(link,ref) {
    var cont = document.getElementById('content_' + ref); 
    var loading = document.getElementById('loading_' + ref);
        $('#hide_spoiler_' + ref).css('display','block');
        $('#show_spoiler_' + ref).css('display','none');
    cont.innerHTML = loading.innerHTML;
    if( http )  
    { http.open('get', link);
        http.onreadystatechange = function ()  
        {   if(http.readyState == 4)  
            {   cont.innerHTML = http.responseText;  }    } 
        http.send(null);
        } 
    else  
    {  document.location = link;   }  } 
// ajax объект
function createRequestObject()  
{  try { return new XMLHttpRequest() } 
    catch(e)  
    {  try { return new ActiveXObject('Msxml2.XMLHTTP') } 
        catch(e)  
        {   try { return new ActiveXObject('Microsoft.XMLHTTP') } 
            catch(e) { return null; }   } } }

    function hideContent(ref) { 
    var cont = document.getElementById('content_' + ref);
        $('#hide_spoiler_' + ref).css('display','none');
        $('#show_spoiler_' + ref).css('display','block');
    cont.innerHTML = '';   
    }