0

我有 2 个 div。

一旦选择了 2 个 div 中的 1 个，每个 '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>
4

2 回答 2

0

如果您不想使用 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();
    }
}
于 2013-08-18T14:26:53.070 回答
0

是的，您可以在 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>
于 2013-08-18T14:09:13.867 回答