按钮单击时切换多个div的可见性

时间：2012-12-23 08:23:37

标签： onclick toggle getelementbyid

我正在努力完成上述工作。这就是我所拥有的：

function toggleVisibility（divid）{

if (divid="homepagecontent")
{
    document.getElementById("homepagecontent").style.visibility = "visible";
    document.getElementById("programmingcontent").style.visibility = "hidden";
    document.getElementById("mediacontent").style.visibility = "hidden";
    document.getElementById("contactcontent").style.visibility = "hidden";
    document.getElementById("aboutcontent").style.visibility = "hidden";
    document.getElementById("parentalcontent").style.visibility = "hidden";
    document.getElementById("sitedesigncontent").style.visibility = "hidden";
}

else if (divid="programmingcontent")

{
    document.getElementById("homepagecontent").style.visibility = "hidden";
    document.getElementById("programmingcontent").style.visibility = "visible";
    document.getElementById("mediacontent").style.visibility = "hidden";
    document.getElementById("contactcontent").style.visibility = "hidden";
    document.getElementById("aboutcontent").style.visibility = "hidden";
    document.getElementById("parentalcontent").style.visibility = "hidden";
    document.getElementById("sitedesigncontent").style.visibility = "hidden";
}

else if (divid="mediacontent")
{
    document.getElementById("homepagecontent").style.visibility = "hidden";
    document.getElementById("programmingcontent").style.visibility = "hidden";
    document.getElementById("mediacontent").style.visibility = "visible";
    document.getElementById("contactcontent").style.visibility = "hidden";
    document.getElementById("aboutcontent").style.visibility = "hidden";
    document.getElementById("parentalcontent").style.visibility = "hidden";
    document.getElementById("sitedesigncontent").style.visibility = "hidden";
}

else if (divid="contactcontent")
{
    document.getElementById("homepagecontent").style.visibility = "hidden";
    document.getElementById("programmingcontent").style.visibility = "hidden";
    document.getElementById("mediacontent").style.visibility = "hidden";
    document.getElementById("contactcontent").style.visibility = "visible";
    document.getElementById("aboutcontent").style.visibility = "hidden";
    document.getElementById("parentalcontent").style.visibility = "hidden";
    document.getElementById("sitedesigncontent").style.visibility = "hidden";
}
else if (divid="aboutcontent")
{
    document.getElementById("homepagecontent").style.visibility = "hidden";
    document.getElementById("programmingcontent").style.visibility = "hidden";
    document.getElementById("mediacontent").style.visibility = "hidden";
    document.getElementById("contactcontent").style.visibility = "hidden";
    document.getElementById("aboutcontent").style.visibility = "visible";
    document.getElementById("parentalcontent").style.visibility = "hidden";
    document.getElementById("sitedesigncontent").style.visibility = "hidden";
}
else if (divid="parentalcontent")
{
    document.getElementById("homepagecontent").style.visibility = "hidden";
    document.getElementById("programmingcontent").style.visibility = "hidden";
    document.getElementById("mediacontent").style.visibility = "hidden";
    document.getElementById("contactcontent").style.visibility = "hidden";
    document.getElementById("aboutcontent").style.visibility = "hidden";
    document.getElementById("parentalcontent").style.visibility = "visible";
    document.getElementById("sitedesigncontent").style.visibility = "hidden";
}
else if (divid="sitedesigncontent")
{
document.getElementById("homepagecontent").style.visibility = "hidden";
    document.getElementById("programmingcontent").style.visibility = "hidden";
    document.getElementById("mediacontent").style.visibility = "hidden";
    document.getElementById("contactcontent").style.visibility = "hidden";
    document.getElementById("aboutcontent").style.visibility = "hidden";
    document.getElementById("parentalcontent").style.visibility = "hidden";
    document.getElementById("sitedesigncontent").style.visibility = "visible";
}
}
</script>

i am calling the function with an onclick event:

(each of the seven buttons are different. this is just the first one)
 a href="#" onclick="toggleVisibility('homepagecontent');" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('home','','../img/nav_img/images/highlight-ui-kit_03.png',1)"><img
 src="../img/nav_img/images/ui-kit_03.png" name="home" width="149" height="63" id="home" /></a>

我无法让它发挥作用。我搞砸了什么????我在董事会上看了几个这样的问题，但对于我的生活，我可以弄清楚我做错了什么..非常感谢你的帮助。

1 个答案:

答案 0 :(得分：0)

这就是我完成它的方式。它不是很优雅，但它的工作原理。 （我在最后一行代码中也收到了SYNTAX ERROR警报。但正如我所说，它有效。

<script type="text/javascript"> 
$(document).ready(function() {
    function functionToLoadFile(){
      jQuery.get('http://www.xxxx.com/nowplaying/NowPlaying.txt?t='+new Date().getTime(), function(data) {
       var myvar = data;
       var parts = myvar.split(/\n/);
       var songtitle = parts[0];
       var songartist = parts[1];
       var songalbum = parts[2];
       var songtime = parts[3];

       $('#songtitleholder').html(songtitle);
       $('#songartistholder').html(songartist);
       $('#songalbumholder').html(songalbum);
       setTimeout(functionToLoadFile, 60000);
    });
    }

    setTimeout(functionToLoadFile, 10)


})






      function homeButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");


    homePage.style.visibility = "visible";
    programmingPage.style.visibility = "hidden";
    eventPage.style.visibility = "hidden";   
    mediaPage.style.visibility = "hidden";
    contactPage.style.visibility = "hidden";
    siteDesignPage.style.visibility = "hidden";
    parentalPage.style.visibility = "hidden";
    aboutPage.style.visibility = "hidden";

    };


    function programmingButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");

    homePage.style.visibility = "hidden";
    programmingPage.style.visibility = "visible";
    eventPage.style.visibility = "hidden";  
    mediaPage.style.visibility = "hidden";
    contactPage.style.visibility = "hidden";
    siteDesignPage.style.visibility = "hidden";
    parentalPage.style.visibility = "hidden";
    aboutPage.style.visibility = "hidden";     
    };



    function eventButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");

    homePage.style.visibility = "hidden";
    programmingPage.style.visibility = "hidden";
    eventPage.style.visibility = "visible";  
    mediaPage.style.visibility = "hidden";
    contactPage.style.visibility = "hidden";
    siteDesignPage.style.visibility = "hidden";
    parentalPage.style.visibility = "hidden";
    aboutPage.style.visibility = "hidden";     
    };


        function mediaButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");

    homePage.style.visibility = "hidden";
    programmingPage.style.visibility = "hidden";
    eventPage.style.visibility = "hidden";  
    mediaPage.style.visibility = "visible";
    contactPage.style.visibility = "hidden";
    siteDesignPage.style.visibility = "hidden";
    parentalPage.style.visibility = "hidden";
    aboutPage.style.visibility = "hidden";     
    };



        function contactButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");

    homePage.style.visibility = "hidden";
    programmingPage.style.visibility = "hidden";
    eventPage.style.visibility = "hidden";  
    mediaPage.style.visibility = "hidden";
    contactPage.style.visibility = "visible";
    siteDesignPage.style.visibility = "hidden";
    parentalPage.style.visibility = "hidden";
    aboutPage.style.visibility = "hidden";     
    };


        function aboutButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");

    homePage.style.visibility = "hidden";
    programmingPage.style.visibility = "hidden";
    eventPage.style.visibility = "hidden";  
    mediaPage.style.visibility = "hidden";
    contactPage.style.visibility = "hidden";
    siteDesignPage.style.visibility = "hidden";
    parentalPage.style.visibility = "hidden";
    aboutPage.style.visibility = "visible";     
    };


        function parentalButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");

    homePage.style.visibility = "hidden";
    programmingPage.style.visibility = "hidden";
    eventPage.style.visibility = "hidden";  
    mediaPage.style.visibility = "hidden";
    contactPage.style.visibility = "hidden";
    siteDesignPage.style.visibility = "hidden";
    parentalPage.style.visibility = "visible";
    aboutPage.style.visibility = "hidden";     
    };

    function designButton(){  
    var homePage = document.getElementById("homepagecontent");  
    var programmingPage = document.getElementById("programmingcontent");
    var eventPage = document.getElementById("eventcontent");
    var mediaPage = document.getElementById("mediacontent");
    var contactPage = document.getElementById("contactcontent");
    var siteDesignPage = document.getElementById("sitedesigncontent");
    var parentalPage = document.getElementById("parentalcontent");
    var aboutPage = document.getElementById("aboutcontent");

    homePage.style.visibility = "hidden";
    programmingPage.style.visibility = "hidden";
    eventPage.style.visibility = "hidden";  
    mediaPage.style.visibility = "hidden";
    contactPage.style.visibility = "hidden";
    siteDesignPage.style.visibility = "visible";
    parentalPage.style.visibility = "hidden";
    aboutPage.style.visibility = "hidden"   
    }

</script>
相关问题
最新问题