Question

我有2个div。

一旦选择了2个div中的1个，每个div的'id'将变为divActive或divInactive，因此可以使用css突出显示活动的那个。

即使我已经有与每个div关联的'onclick'动作，是否可以这样做？

以下是我的div：

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

Answer 1

是的，您可以在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>

Answer 2

如果您不想使用jQuery，则不必这样做。这是一个纯粹的javascript版本。请注意，它切换active类，而不是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();
    }
}

编辑以容纳评论中的请求：如果您始终希望其中一个处于活动状态，则会大大缩短代码。这是更新的代码。只需确保将everyone活动类放在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();
    }
}

1个div的几个'onclick'事件（更改div id）

2 个答案: