Javascript 几个'；onclick'；1个分区的事件（更改分区id）

我有两个div

一旦选择了2个div中的1个，每个div的“id”将更改为divActive或divActive，以便可以使用css突出显示活动的div

即使我已经有一个与每个div相关联的“onclick”操作，也可以这样做吗

以下是我的简历：

<div class="statusOption" onclick="loadXMLDoc('indexEveryone')">Everyone, everywhere</div>
<div class="statusOption" onclick="loadXMLDoc('indexFav')">Favourites Only</div>

每个人，每个地方
仅限最爱

以下是我当前的javascript：

<script>
function loadXMLDoc(pageName)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","../home/" + pageName + ".php",true);
xmlhttp.send();
}
</script>

函数loadXMLDoc（pageName）
{
var-xmlhttp；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“centreCont”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“./home/”+pageName+“.php”，true）；
xmlhttp.send（）；
}

是的，在onclick中可以有多个函数调用

但是，不应更改元素的id，而应添加或删除类

此外，您还应该考虑使用像jQuery这样的东西，这样可以使代码更加简洁：

<div id="everyone" class="statusOption" onclick="loadXMLDoc('indexEveryone')">Everyone, everywhere</div>
<div id="favorites" class="statusOption" onclick="loadXMLDoc('indexFav')">Favourites Only</div>

<script>
$(document).ready(function(){
   $('#everyone').on('click', loadXMLDoc, 'indexEveryone');
   $('#favorites').on('click', loadXMLDoc, 'indexFav');
   $('div.statusOption').on('click', function(){
     $('div.statusOption').removeClass('active'); 
     $(this).addClass('active');
   });
});


function loadXMLDoc(event)
{
$.ajax({
  url: "../home/" + event.data + ".php",
  type: "GET",
  success: function(result){ $("#centreCont").html(result); }
});  
</script>

每个人，每个地方
仅限最爱
$（文档）.ready（函数（）{
$（“#每个人”）。在（'click'，loadXMLDoc，'indexEveryone'）；
$（“#收藏夹”）。在（'click'，loadXMLDoc'，indexFav'）；
$（'div.statusOption'）。在（'click'，function（）上{
$（'div.statusOption'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
函数loadXMLDoc（事件）
{
$.ajax({
url:“../home/”+event.data+“.php”，
键入：“获取”，
成功：函数（结果）{$（“#centreCont”）.html（结果）}
});  

如果您不想使用jQuery，您不必这样做。这是一个纯javascript版本。请注意，它切换的是一个

活动的

类，而不是一个ID

window.onload = function () {
    var everyone = document.getElementById('everyone'),
        favorites = document.getElementById('favorites');

    everyone.onclick = function() {
        loadXMLDoc('indexEveryone');
        var myClasses = everyone.className,
            otherClasses = favorites.className;
        if (myClasses.contains("active"))
        {
            everyone.className = 'statusOption';
        }
        else if (otherClasses.contains("active")) {
            everyone.className = 'statusOption active';
            favorites.className = 'statusOption';
        }
        else {
            everyone.className = 'statusOption active';
        }
    }

    favorites.onclick = function() {
        loadXMLDoc('indexFav');        
        var myClasses = favorites.className,
            otherClasses = everyone.className;
        if (myClasses.contains("active"))
        {
            favorites.className = 'statusOption';
        }
        else if (otherClasses.contains("active")) {
            favorites.className = 'statusOption active';
            everyone.className = 'statusOption';
        }
        else {
            favorites.className = 'statusOption active';
        }
    }

    function loadXMLDoc(event) {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","../home/" + pageName + ".php",true);
        xmlhttp.send();
    }
}

编辑以适应注释中的请求：如果您总是希望一个活动类处于活动状态，则会大大缩短代码。以下是更新的代码。只需确保您为

所有人提供HTML中要开始的活动类

window.onload = function () {
    var everyone = document.getElementById('everyone'),
        favorites = document.getElementById('favorites');

    everyone.onclick = function() {
        loadXMLDoc('indexEveryone');
        var otherClasses = favorites.className;
        if (otherClasses.contains("active")) {
            everyone.className = 'statusOption active';
            favorites.className = 'statusOption';
        }
    }

    favorites.onclick = function() {
        loadXMLDoc('indexFav');        
        var otherClasses = everyone.className;
        if (otherClasses.contains("active")) {
            favorites.className = 'statusOption active';
            everyone.className = 'statusOption';
        }
    }

    function loadXMLDoc(pageName) {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","../home/" + pageName + ".php",true);
        xmlhttp.send();
    }
}

u应该考虑使用jQuyYu应该更改类而不是ID.@ ErIC.IZAKK我不同意。completely@Zeaklous：不一定是jQuery，但在当今时代，当涉及到DOM操作或AJAX时，在框架上使用vanilla JS并没有太大的争议。我同意前两点，而不是第三点为这个小函数调用整个库是远远不够的necessary@Zeaklous除非我们谈论的是高性能的应用程序，并且考虑到他迟早会需要其他功能，是的，这是有必要的。@Zeaklous:您不需要“实现”jQuery。特别是通过CDN部署时，jQuery几乎不会增加页面负载一次也没有。如果你几乎可以不花钱的话，为什么你要编写自己的AJAX实现来支持像IE6这样的浏览器呢？更不用说你的代码变得更容易阅读和维护了。