2014-03-31 106 views
0

點擊一個按鈕應觸發圖像顯示出來....如何使按鈕觸發圖像不透明度更改?

編輯其實我得到它的工作,但改變時,一些ID的鏈接它停止工作,如果我留下任何的這些功能在我的sidemenus不會出現?

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
    <head> 
     <meta charset="UTF-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>MAKE A CUPCAKE! | YourCupcake.com</title> 
     <meta name="description" content="Blueprint: Slide and Push Menus" /> 
     <meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery" /> 
     <meta name="author" content="Codrops" /> 
     <link rel="shortcut icon" href="../favicon.ico"> 
     <link rel="stylesheet" type="text/css" href="css/default.css" /> 
     <link rel="stylesheet" type="text/css" href="css/component.css" /> 
     <script src="js/modernizr.custom.js"></script> 
    </head> 
    <body class="cbp-spmenu-push"> 
     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right beslagopties" id="beslagopties"> 
      <h3>Beslag</h3> 

      <h2>Kies je beslag smaak:</h2> 

      <input type="radio" name="smaakBeslag" value="Vanille" class="smaakBeslag"> Vanille<br> 
      <input type="radio" name="smaakBeslag" value="Chocolade" class="smaakBeslag">Chocolade<br> 
      <input type="radio" name="smaakBeslag" value="Aardbei" class="smaakBeslag"> Aardbei<br> 
      <input type="radio" name="smaakBeslag" value="RedVelvet" class="smaakBeslag"> Red Velvet<br> 
      <input type="radio" name="smaakBeslag" value="Banaan" class="smaakBeslag"> Banaan<br> 
      <input type="radio" name="smaakBeslag" value="Kokos" class="smaakBeslag"> Kokos<br> 

      <h2>Kies je beslagkleur:</h2> 

      <button type="button" onclick="Function1()" >Blauw</button><br/> 
      <button type="button" onclick="Function2()" >Paars</button><br/> 
      <button type="button" onclick="Function3()" >Rood</button><br/> 
      <button type="button" onclick="Function4()" >Roze</button><br/> 
      <button type="button" onclick="Function5()" >Bruin</button><br/> 

     </nav> 

     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right bakingcupopties" id="bakingcupopties"> 
      <h3>BakingCup</h3> 
      <h2>Kies je bakingcup kleur:</h2> 
      <button type="button" onclick="Function6()" >Paars</button><br/> 
      <button type="button" onclick="Function7()" >Blauw</button><br/> 
      <button type="button" onclick="Function8()" >Geel</button><br/> 
      <button type="button" onclick="Function9()" >Rood</button><br/> 
      <button type="button" onclick="Function10()">Roze</button><br/> 
      <button type="button" onclick="Function11()">Wit</button><br/> 

      <h2>Kies je bakingcup plaatje:</h2> 
      <button type="button" onclick="Function12()" >Skulls</button><br/> 
      <button type="button" onclick="Function13()" >Hartjes</button><br/> 
      <button type="button" onclick="Function14()" >Bubbles</button><br/> 
      <button type="button" onclick="Function15()" >Bloemetjes</button><br/> 
      <button type="button" onclick="Function16()" >Niets</button><br/> 
     </nav> 

     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right plattetoppingding" id="plattetoppingding"> 
      <h3>Platte topping</h3> 
      <h2> Kies je soort:</h2> 
      <input type="radio" name="soortFondant" value="fondant" class="soortFondant">Fondant<br/> 
      <input type="radio" name="soortFondant" value="marsepijn" class="soortFondant">Marsepijn<br/> 
      <input type="radio" name="soortFondant" value="glazuur" class="soortFondant">Glazuur<br/> 

      <h2> Kies je fondantkleur:</h2> 
      <button type="button" onclick="Function17()" >Blauw</button><br/> 
      <button type="button" onclick="Function18()" >Bruin</button><br/> 
      <button type="button" onclick="Function19()" >Groen</button><br/> 
      <button type="button" onclick="Function20()" >Paars</button><br/> 
      <button type="button" onclick="Function21()" >Rood</button><br/> 
      <button type="button" onclick="Function22()" >Roze</button><br/> 

      <h2> Kies je versiering:</h2> 
      <button type="button" onclick="Function23()">Quilten</button><br/> 
      <button type="button" onclick="Function24()" >Lijnen</button><br/> 
      <button type="button" onclick="Function25()" >Rondjes</button><br/> 
      <button type="button" onclick="Function26()" >Geen</button> 
     </nav> 

     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right toeftopperding" id="toeftopperding"> 
      <h3>Toeftopping</h3> 
      <h2>Kies je soort:</h2> 
      <input type="radio" name="soortTopping" value="slagroom" class="soortTopping">Slagroom<br/> 
      <input type="radio" name="soortTopping" value="botercreme" class="soortTopping">Botercreme<br/> 
      <input type="radio" name="soortTopping" value="royal-icing" class="soortTopping">Royal Icing<br/> 
      <input type="radio" name="soortTopping" value="creamcheese" class="soortTopping">Cream cheese<br/> 

      <h2> Kies je toppingkleur:</h2> 
      <button type="button" onclick="Function27()" >Paars</button><br/> 
      <button type="button" onclick="Function28()" >Blauw</button><br/> 
      <button type="button" onclick="Function29()" >Bruin</button><br/> 
      <button type="button" onclick="Function30()" >Geel</button><br/> 
      <button type="button" onclick="Function31()" >Oranje</button><br/> 
      <button type="button" onclick="Function32()" >Wit</button><br/> 

      <h2>Kies je toppingversiering:</h2> 
      <button type="button" onclick="Function33()" >Balletjes</button><br/> 
      <button type="button" onclick="Function34()" >Hagelslag</button><br/> 
      <button type="button" onclick="Function35()" >Discohagel</button><br/> 
      <button type="button" onclick="Function36()" >Geen</button><br/> 
     </nav> 

     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right topperding" id="topperding"> 
      <h3>Topper</h3> 
      <h2> Kies je topper:</h2> 
      <button type="button" onclick="Function37()" >Aardbei</button><br/> 
      <button type="button" onclick="Function38()" >Kers</button><br/> 
      <button type="button" onclick="Function39()" >Kaars</button><br/> 
      <button type="button" onclick="Function40()" >Hartje<</button> 
      <button type="button" onclick="Function41()" >Bloemetje</button><br/> 
      <button type="button" onclick="Function42()" >Geen<br/></button> 
     </nav> 

     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right kaartjeding" id="kaartjeding"> 
      <h3>Kaartje</h3> 
      <h2> Kies je kaartje:</h2> 
      <button type="button" onclick="Function43()" >Rood</button><br/> 
      <button type="button" onclick="Function44()" >Roze</button><br/> 
      <button type="button" onclick="Function45()" >Blauw</button><br/> 
      <button type="button" onclick="Function46()" >Geel</button><br/> 
      <button type="button" onclick="Function47()" >Groen</button><br/> 
      <button type="button" onclick="Function48()" >Wit</button><br/> 
      <button type="button" onclick="Function49()" >Geen</button><br/> 
     </nav> 

     <div class="container"> 
      <header class="clearfix"> 
       <span>Cupcakes...</span> 
       <h1>Make your own!</h1> 
      </header> 
      <div class="main"> 
       <section> 
        <h2>Change it!</h2> 
        <!-- Class "cbp-spmenu-open" gets applied to menu --> 

        <button id="beslag1">Beslag</button> 
        <button id="bakingcup1">Baking cup</button> 
        <button id="plattetoppingding1">plat</button> 
        <button id="toeftopperding1">toef</button> 
        <button id="topperding1">topperding</button> 
        <button id="kaartjeding1">kaartjeding</button> 
        <!--<button id="plat1">Platte topping</button> 
        <button id="toef1">Toef topping</button> 
        <button id="topper1">Topper</button> 
        <button id="kaartje1">Kaartje</button>--> 
       </section> 
      </div> 
      <div class="images"> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Kleur/Schaduw-01.png"/> 
       <img src="../../Pictures/Cupcakeparts/Beslag/Rood-01.png" id="RoodBeslag"/> 
       <img src="../../Pictures/Cupcakeparts/Beslag/Blauw-01.png" id="BeslagBlauw"/> 
       <img src="../../Pictures/Cupcakeparts/Beslag/Paars-01.png" id="BeslagPaars"/> 
       <img src="../../Pictures/Cupcakeparts/Beslag/Roze-01.png" id="BeslagRoze"/> 
       <img src="../../Pictures/Cupcakeparts/Beslag/Bruin-01.png" id="BeslagBruin"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Kleur/Wit-01.png" id="BakjeWit"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Kleur/Roze-01.png" id="BakjeRoze"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Kleur/Rood-01.png" id="BakjeRood"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Kleur/Paars-01.png" id="BakjePaars"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Kleur/Geel-01.png" id="BakjeGeel"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Kleur/Blauw-01.png" id="BakjeBlauw"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Tekening/Hartjes-01.png" id="BakjeHartjes"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Tekening/skulls-01.png" id="BakjeSkulls"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Tekening/Bloemetjes-01.png" id="BakjeBloemetjes"/> 
       <img src="../../Pictures/Cupcakeparts/Bakje-Tekening/Bubbles-01.png" id="BakjeBubbles"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Kleur/Blauw-01.png" id="PlatBlauw"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Kleur/Bruin-01.png" id="PlatBruin"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Kleur/Groen-01.png" id="PlatGroen"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Kleur/Paars-01.png" id="PlatPaars"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Kleur/Rood-01.png" id="PlatRood"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Kleur/Roze-01.png" id="PlatRoze"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Versiering/Lijnen-01.png" id="PlatLijnen"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Versiering/Quilten-01.png" id="PlatQuilten"/> 
       <img src="../../Pictures/Cupcakeparts/Plat-Versiering/Rond-01.png" id="PlatRondjes"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Kleur/Blauw-01.png" id="ToefBlauw"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Kleur/Bruin-01.png" id="ToefBruin"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Kleur/Geel-01.png" id="ToefGeel"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Kleur/Oranje-01.png" id="ToefOranje"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Kleur/Paars-01.png" id="ToefPaars"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Kleur/Wit-01.png" id="ToefWit"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Versiering/Balletjes-01.png" id="ToefBalletjes"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Versiering/Discohagel-01.png" id="ToefDiscohagel"/> 
       <img src="../../Pictures/Cupcakeparts/Toef-Versiering/Hagelslag-01.png" id="ToefHagelslag"/> 
       <img src="../../Pictures/Cupcakeparts/Toppers/hartje-01.png" id="TopperHartje"/> 
       <img src="../../Pictures/Cupcakeparts/Toppers/bloemetje-01.png" id="TopperBloemetje"/> 
       <img src="../../Pictures/Cupcakeparts/Toppers/kers-01.png" id="TopperKers"/> 
       <img src="../../Pictures/Cupcakeparts/Toppers/aardbei-01.png" id="TopperAardbei"/> 
       <img src="../../Pictures/Cupcakeparts/Toppers/kaars-01.png" id="TopperKaars"/> 
       <img src="../../Pictures/Cupcakeparts/Kaartje/blauw-01.png" id="KaartjeBlauw"/> 
       <img src="../../Pictures/Cupcakeparts/Kaartje/geel-01.png" id="KaartjeGeel"/> 
       <img src="../../Pictures/Cupcakeparts/Kaartje/groen-01.png" id="KaartjeGroen"/> 
       <img src="../../Pictures/Cupcakeparts/Kaartje/rood-01.png" id="KaartjeRood"/> 
       <img src="../../Pictures/Cupcakeparts/Kaartje/roze-01.png" id="KaartjeRoze"/> 
       <img src="../../Pictures/Cupcakeparts/Kaartje/wit-01.png" id="KaartjeWit"/> 
       <img src="../../Pictures/Cupcakeparts/transparant-01.png" id="Geen"/> 
      </div> 
    </div> 
     <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie --> 
     <script src="js/classie.js"></script> 
     <script> 
      var 
       menuBeslag = document.getElementById('beslagopties'), 
       showBeslag = document.getElementById('beslag1'), 
       menuBakingcup = document.getElementById('bakingcupopties'), 
       showBakingcup = document.getElementById('bakingcup1'), 
       menuPlattetoppingding = document.getElementById('plattetoppingding'), 
       showPlattetoppingding = document.getElementById('plattetoppingding1'), 
       menuToeftopperding = document.getElementById('toeftopperding'), 
       showToeftopperding = document.getElementById('toeftopperding1'), 
       menuTopperding = document.getElementById('topperding'), 
       showTopperding = document.getElementById('topperding1'), 
       menuKaartjeding = document.getElementById('kaartjeding'), 
       showKaartjeding = document.getElementById('kaartjeding1'), 

       body = document.body; 


      showBeslag.onclick = function() { 
       classie.toggle(this, 'active'); 
       classie.toggle(menuBeslag, 'cbp-spmenu-open'); 
       disableOther('showBeslag'); 
      }; 

      showBakingcup.onclick = function() { 
       classie.toggle(this, 'active'); 
       classie.toggle(menuBakingcup, 'cbp-spmenu-open'); 
       disableOther('showBakingcup'); 
      }; 

      showPlattetoppingding.onclick = function() { 
       classie.toggle(this, 'active'); 
       classie.toggle(menuPlattetoppingding, 'cbp-spmenu-open'); 
       disableOther('showPlattetoppingding'); 
      }; 

      showToeftopperding.onclick = function() { 
       classie.toggle(this, 'active'); 
       classie.toggle(menuToeftopperding, 'cbp-spmenu-open'); 
       disableOther('showToeftopperding'); 
      }; 

      showTopperding.onclick = function() { 
       classie.toggle(this, 'active'); 
       classie.toggle(menuTopperding, 'cbp-spmenu-open'); 
       disableOther('showTopperding'); 
      }; 

      showKaartjeding.onclick = function() { 
       classie.toggle(this, 'active'); 
       classie.toggle(menuKaartjeding, 'cbp-spmenu-open'); 
       disableOther('showKaartjeding'); 
      }; 



     function Function1() { 
      x = document.getElementById('BeslagBlauw'); 
      x.style.width=100%; 
      /*y = document.getElementById('Beslagpaars', 'RoodBeslag', 'BeslagRoze', 'BeslagBruin'); 
      y.style. opacity = 0;*/ 
     } 

     function Function2() { 
      x = document.getElementById('BeslagPaars'); 
      x.style.width=100%; 
      /*y = document.getElementById('BeslagBlauw', 'RoodBeslag', 'BeslagRoze', 'BeslagBruin'); 
      y.style. opacity = 0;*/ 
     } 

     function Function3() { 
      x = document.getElementById('RoodBeslag'); 
      x.style.width=100%; 
      /*y = document.getElementById('BeslagPaars', 'BeslagBlauw', 'BeslagRoze', 'BeslagBruin'); 
      y.style. opacity = 0;*/ 
     } 

     function Function4() { 
      x = document.getElementById('BeslagRoze'); 
      x.style.width=100%; 
      /*y = document.getElementById('BeslagPaars', 'RoodBeslag', 'BeslagBlauw', 'BeslagBruin'); 
      y.style. opacity = 0;*/ 
     } 

     function Function5() { 
      x = document.getElementById('BeslagBruin'); 
      x.style.width=100%; 
      /*y = document.getElementById('Beslagpaars', 'RoodBeslag', 'BeslagRoze', 'BeslagBlauw'); 
      y.style. opacity = 0;*/ 
     } 

     function Function6() { 
      x = document.getElementById('BakjePaars'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeBlauw', 'BakjeGeel', 'BakjeRood', 'BakjeRoze', 'BakjeWit'); 
      y.style. opacity = 0;*/ 
     } 


     function Function7() { 
      x = document.getElementById('BakjeBlauw'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjePaars', 'BakjeGeel', 'BakjeRood', 'BakjeRoze', 'BakjeWit'); 
      y.style. opacity = 0;*/ 
     } 


     function Function8() { 
      x = document.getElementById('BakjeGeel'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeBlauw', 'BakjePaars', 'BakjeRood', 'BakjeRoze', 'BakjeWit'); 
      y.style. opacity = 0;*/ 
     } 

     function Function9() { 
      x = document.getElementById('BakjeRood'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeBlauw', 'BakjeGeel', 'BakjePaars', 'BakjeRoze', 'BakjeWit'); 
      y.style. opacity = 0;*/ 
     } 



function Function10() { 
      x = document.getElementById('BakjeRoze'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeBlauw', 'BakjeGeel', 'BakjeRood', 'BakjePaars', 'BakjeWit'); 
      y.style. opacity = 0;*/ 
     } 

     function Function11() { 
      x = document.getElementById('BakjeWit'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeBlauw', 'BakjeGeel', 'BakjeRood', 'BakjeRoze', 'BakjePaars'); 
      y.style. opacity = 0;*/ 
     } 

     function Function12() { 
      x = document.getElementById('BakjeSkulls'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeHartjes', 'BakjeBloemetjes', 'BakjeBubbles'); 
      y.style. opacity = 0;*/ 
     } 

     function Function13() { 
      x = document.getElementById('BakjeHartjes'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeSkulls', 'BakjeBloemetjes', 'BakjeBubbles'); 
      y.style. opacity = 0;*/ 
     } 

     function Function14() { 
      x = document.getElementById('BakjeBubbles'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeHartjes', 'BakjeSkulls', 'BakjeBloemetjes'); 
      y.style. opacity = 0;*/ 
     } 

     function Function15() { 
      x = document.getElementById('BakjeBloemetjes'); 
      x.style.width=100%; 
      /*y = document.getElementById('BakjeHartjes', 'BakjeBubbles', 'BakjeSkulls'); 
      y.style. opacity = 0;*/ 
     } 

     function Function16() { 
      x = document.getElementById('Geen'); 
      x.style.width=100%; 
      /*y = document.getElementById('Beslagpaars', 'RoodBeslag', 'BeslagRoze', 'BeslagBlauw'); 
      y.style. opacity = 0;*/ 
     } 
     /* 

     function Function17() { 
      x = document.getElementById('PlatBlauw'); 
      x.style.width=100%; 
      /*y = document.getElementById'PlatRood', 'PlatPaars', 'PlatGroen', 'PlatBruin', 'PlatRoze'); 
      y.style. opacity = 0;*/ 

     } 


function Function18() { 
      x = document.getElementById('PlatBruin'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatRood', 'PlatPaars', 'PlatGroen', 'PlatBruin', 'PlatBlauw'); 
      y.style. opacity = 0;*/ 
     } 

     function Function19() { 
      x = document.getElementById('PlatGroen'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatRood', 'PlatPaars', 'PlatRoze', 'PlatBruin', 'PlatBlauw'); 
      y.style. opacity = 0;*/ 
     } 

     function Function20() { 
      x = document.getElementById('PlatPaars'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatRood', 'PlatRoze', 'PlatGroen', 'PlatBruin', 'PlatBlauw'); 
      y.style. opacity = 0;*/ 
     } 

     function Function21() { 
      x = document.getElementById('PlatRood'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatRoze', 'PlatPaars', 'PlatGroen', 'PlatBruin', 'PlatBlauw'); 
      y.style. opacity = 0;*/ 
     } 

     function Function22() { 
      x = document.getElementById('PlatRoze'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatRood', 'PlatPaars', 'PlatGroen', 'PlatBruin', 'PlatBlauw'); 
      y.style. opacity = 0;*/ 
     } 

     function Function23() { 
      x = document.getElementById('PlatQuilten'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatLijnen','PlatRondjes'); 
      y.style. opacity = 0;*/ 

     } 

     function Function24() { 
      x = document.getElementById('PlatLijnen'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatQuilten', 'PlatRondjes'); 
      y.style. opacity = 0;*/ 

     } 

     function Function25() { 
      x = document.getElementById('PlatRondjes'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatLijnen', 'PlatQuilten'); 
      y.style. opacity = 0;*/ 

     } 

     function Function26() { 
      x = document.getElementById('Geen'); 
      x.style.width=100%; 
      /*y = document.getElementById('PlatLijnen', 'PlatQuilten', 'PlatRondjes'); 
      y.style. opacity = 0;*/ 

     } 

     function Function27() { 
      x = document.getElementById('ToefPaars'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefOranje','ToefGeel','ToefBruin','ToefBlauw','ToefWit'); 
      y.style. opacity = 0;*/ 

     } 

     function Function28() { 
      x = document.getElementById('ToefBlauw'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefOranje','ToefGeel','ToefBruin','ToefWit','ToefPaars'); 
      y.style. opacity = 0;*/ 

     } 

     function Function29() { 
      x = document.getElementById('ToefBruin'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefOranje','ToefGeel','ToefWit','ToefBlauw','ToefPaars'); 
      y.style. opacity = 0;*/ 

     } 

     function Function30() { 
      x = document.getElementById('ToefGeel'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefOranje','ToefWit','ToefBruin','ToefBlauw','ToefPaars'); 
      y.style. opacity = 0;*/ 

     } 

     function Function31() { 
      x = document.getElementById('ToefOranje'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefWit','ToefGeel','ToefBruin','ToefBlauw','ToefPaars'); 
      y.style. opacity = 0;*/ 

     } 

     function Function32() { 
      x = document.getElementById('ToefWit'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefOranje','ToefGeel','ToefBruin','ToefBlauw','ToefPaars'); 
      y.style. opacity = 0;*/ 

     } 

     function Function33() { 
      x = document.getElementById('ToefBalletjes'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefDiscohagel','ToefHagelslag'); 
      y.style. opacity = 0;*/ 

     } 

     function Function34() { 
      x = document.getElementById('ToefHagelslag'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefDiscohagel', 'ToefBalletjes'); 
      y.style. opacity = 0;*/ 

     } 

     function Function35() { 
      x = document.getElementById('ToefDiscohagel'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefHagelslag', 'ToefBalletjes'); 
      y.style. opacity = 0;*/ 

     } 

     function Function36() { 
      x = document.getElementById('Geen'); 
      x.style.width=100%; 
      /*y = document.getElementById('ToefDiscohagel','ToefHagelslag', 'ToefBalletjes'); 
      y.style. opacity = 0;*/ 

     } 


     function Function37() { 
      x = document.getElementById('TopperAardbei'); 
      x.style.width=100%; 
      /*y = document.getElementById('TopperBloemetje', 'TopperHartje', 'TopperKaars', 'TopperKers'); 
      y.style. opacity = 0;*/ 

     } 

     function Function38() { 
      x = document.getElementById('TopperKers'); 
      x.style.width=100%; 
      /*y = document.getElementById('TopperBloemetje', 'TopperHartje', 'TopperKaars', 'TopperAardbei'); 
      y.style. opacity = 0;*/ 
     } 

     function Function39() { 
      x = document.getElementById('TopperKaars'); 
      x.style.width=100%; 
      /*y = document.getElementById('TopperBloemetje', 'TopperHartje', 'TopperKers', 'TopperAardbei'); 
      y.style. opacity = 0;*/ 
     } 

     function Function40() { 
      x = document.getElementById('TopperHartje'); 
      x.style.width=100%; 
      /*y = document.getElementById('TopperBloemetje', 'TopperKaars', 'TopperKers', 'TopperAardbei'); 
      y.style. opacity = 0;*/ 
     } 

     function Function41() { 
      x = document.getElementById('TopperBloemetje'); 
      x.style.width=100%; 
      /*y = document.getElementById('TopperHartje', 'TopperKaars', 'TopperKers', 'TopperAardbei'); 
      y.style. opacity = 0;*/ 
     } 

     function Function42() { 
      x = document.getElementById('Geen'); 
      x.style.width=100%; 
      /*y = document.getElementById('TopperBloemetje', 'TopperHartje', 'TopperKaars', 'TopperKers', 'TopperAardbei'); 
      y.style. opacity = 0;*/ 

     } 

     function Function43() { 
      x = document.getElementById('KaartjeRood'); 
      x.style.width=100%; 
      /* = document.getElementById('KaartjeGroen', 'KaartjeGeel', 'KaartjeBlauw', 'KaartjeWit', 'KaartjeRoze'); 
      y.style. opacity = 0;*/ 

     } 

     function Function44() { 
      x = document.getElementById('KaartjeRoze'); 
      x.style.width=100%; 
      /*y = document.getElementById('KaartjeGroen', 'KaartjeGeel', 'KaartjeBlauw', 'KaartjeRood', 'KaartjeWit'); 
      y.style. opacity = 0;*/ 

     } 

     function Function45() { 
      x = document.getElementById('KaartjeBlauw'); 
      x.style.width=100%; 
      /*y = document.getElementById('KaartjeGroen', 'KaartjeGeel', 'KaartjeWit', 'KaartjeRood', 'KaartjeRoze'); 
      y.style. opacity = 0;*/ 

     } 

     function Function46() { 
      x = document.getElementById('KaartjeGeel'); 
      x.style.width=100%; 
      /*y = document.getElementById('KaartjeGroen', 'KaartjeWit', 'KaartjeBlauw', 'KaartjeRood', 'KaartjeRoze'); 
      y.style. opacity = 0;*/ 

     } 
     function Function47() { 
      x = document.getElementById('KaartjeGroen'); 
      x.style.width=100%; 
      /*y = document.getElementById('KaartjeWit', 'KaartjeGeel', 'KaartjeBlauw', 'KaartjeRood', 'KaartjeRoze'); 
      y.style. opacity = 0;*/ 

     } 


     function Function48() { 
      x = document.getElementById('KaartjeWit'); 
      x.style.width=100%; 
      /*y = document.getElementById('KaartjeGroen', 'KaartjeGeel', 'KaartjeBlauw', 'KaartjeRood', 'KaartjeRoze'); 
      y.style. opacity = 0;*/ 

     } 

     function Function49() { 
      x = document.getElementById('Geen'); 
      x.style.width=100%; 
      /*y = document.getElementById('KaartjeGroen', 'KaartjeGeel', 'KaartjeBlauw', 'KaartjeRood', 'KaartjeRoze', 'KaartjeWit'); 
      y.style. opacity = 0;*/ 


     } 

      /*function disableOther(button) { 

       if(button !== 'beslag1') { 
        classie.toggle(showBeslag, 'disabled'); 
       } 

       if(button !== 'bakingcup1') { 
        classie.toggle(showBakingcup, 'disabled'); 
       } 

       if(button !== 'plattetoppingding1') { 
        classie.toggle(showPlattetoppingding, 'disabled'); 
       } 

       if(button !== 'toeftopperding1') { 
        classie.toggle(showToeftopperding, 'disabled'); 
       } 


       if(button !== 'topperding1') { 
        classie.toggle(showTopperding, 'disabled'); 
       } 


       if(button !== 'kaartjeding1') { 
        classie.toggle(showKaartjeding, 'disabled'); 
       } 


      }*/ 
     </script> 
    </body> 
</html> 
+0

代碼?沒有它,我們可以做的不多 – mituw16

+0

呃..我該如何展示給你們呢?我有很多圖片鏈接在裏面? – alwaysalesson

+0

只需將HTML粘貼到原始文章中即可。我們需要的只是代碼,不需要看圖像是什麼樣子:) http://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks – mituw16

回答

0

粗略地說,你需要點擊觸發一些JavaScript代碼,改變了相關目標的不透明度。一個匆匆的例子是這樣的:

<style> 
.topping { 
    opacity: 0; 
} 
</style> 
<div onclick='changeOpacity()'>Click me</div> 
<div id=changeme class=topping>Hello</div> 
<script> 

function changeOpacity() { 
    x = document.getElementById('changeme'); 
    x.style.opacity = 1; 
} 
</script> 

我認爲你正在尋找相關的一點就是要改變不透明度(x.style.opacity,或者你可以使用jQuery),但你還需要整理了解如何將按鈕與適當的圖像鏈接起來。

它可能與單選按鈕有點不同,但它基本上是一樣的想法。

+0

謝謝!這實際上工作了一會兒...在我的HTML中改變了一些東西,現在它不再工作了, - 在我的問題中添加了一個新的HTML文件,你可以看看它試圖找出原因iit不工作了?如果我添加功能,我的側邊欄不再工作......功能和側邊欄實際上今天晚上工作了一段時間......現在它不:x – alwaysalesson