onclick - ボタンクリックで複数のdivの表示を切り替えます

Question

私は上記を達成しようとしています。これは私が持っているものです：

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

これを機能させることはできません。私は何を台無しにしていますか???? そして、私はボード上でこのようないくつかの質問を見てきましたが、私の人生の間、私は私が間違っていることを理解することができます..助けていただければ幸いです。

score 0 · Accepted Answer

これが私がそれを達成した方法です。あまりエレガントではありませんが、機能します。（コードの最後の行にも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>

onclick - ボタンクリックで複数のdivの表示を切り替えます

1 に答える 1

Related

Reference