2016-09-18 95 views
-1

我是一名HTML初學者。我有一些代碼與按鈕,他們是一個痛苦,但我不知道如何解決這個問題。我有按鈕顯示信息,每次點擊它們時,信息都會顯示在我想要隱藏的信息上方,只要點擊一個新按鈕以顯示新信息。請幫忙!我想學習如何解決這個問題,所以我不會在將來遇到這個問題。如何正確顯示按鈕?

<div style="width: 800px; height: 60px; margin: 0 auto; border-color: #FFFFFF; border-style: solid; border-width: 2px; background-color: #000000; padding:15px;"> 
 
<font face="impact" color="white"><center><font size="10">☼CLYDE☼</font face></div> 
 

 
<br><div style="width: 800px; height: 300px; margin:0 auto; border-color: #ffffff; border-width: 5px; border-style: double; background-color: rgba(0,0,0,1); padding: 10px;"><table style="margin: 1px"><tbody><tr><td><div style="width: 32px; height: 266px; border-color: white; border-style: inset; padding: 3px;"><button title="basics" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" type="button"><font size="5">♡</font size></button> 
 

 
<br><br><button title="love life" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" type="button"><font size="5">♡</font size></button> 
 

 
<br><br><button title="more basics" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" type="button"><font size="5">♡</font size></button> 
 

 
<br><br><button title="interactions" onclick="if(document.getElementById('spoiler3') .style.display=='none') {document.getElementById('spoiler3') .style.display=''}else{document.getElementById('spoiler3') .style.display='none'}" type="button"><font size="5">♡</font size></button> 
 

 
<br><br><button title="gallery" onclick="if(document.getElementById('spoiler4') .style.display=='none') {document.getElementById('spoiler4') .style.display=''}else{document.getElementById('spoiler4') .style.display='none'}" type="button"><font size="5">♡</font size></button></div></td><td><div style="width: 500px; height: 244px; margin: 1.5%; border-color: #FFFFFF; border-style: solid; border-width: 2px; background-color: #000000; padding: 15px;"><div id="spoiler" style="display:none;"><font color="white"><font face="monospace"><p align="left"><b>name___</b> clyde, but please call him princess 
 
<b>age___</b> twenty-seven months 
 
<b>gender___</b> feminine male (xy) 
 
<b>pronouns___</b> he/him/his 
 
<b>sexuality___</b> panromantic homoflexible (preference for masculinity) 
 

 
<b>rank___</b> warrior 
 
<b>residence___</b> glacierclan (unofficially 'gaycierclan') 
 
<b>student___</b> possibly doekit 
 
<b>teacher___</b> cherrystalk, a fae in the past</font></font></div><div id="spoiler1" style="display:none;"><font color="white"><font face="monospace"><b>bronze rose___</b> snowbird, she's the only one to comfort him 
 
<b>silver rose___</b> cosmo and mikasa, they make him shiver in delight 
 
<b>golden rose___</b> hopefully soon 
 
<b>wilted rose___</b> no mention 
 

 
<b>family___</b> sequoiamask (father), clementine (mother), coralflame (sister), powderedtoe (sister), leliana (sister) 
 
<b>adopted family___</b> none 
 
<b>offspring___</b> hopefully soon</font></font></div><div id="spoiler2" style="display:none;"><font color="white"><font face="monospace"><b>fragrance___</b> peaches and cream 
 
<b>jewels___</b> a lovely aquamarine 
 
<b>coat___</b> a brown peachy undertone with cinnamon freckles, coca dapples, and milky white dapples 
 
<b>vocals___</b> troye sivan (a soft masculine tone) 
 

 
<b>personality___</b> timid, shy, anxious, nervous 
 
<b>disorders___</b> over the months, clyde has unfortunately developed social anxiety, please be patient with him 
 
<b>fears___</b> arsonphobia (fire), ruining his pelt or acquiring scars 
 
<b>quirks___</b> nips at paws when under stress or anxiety, sleeps a lot, very easy to get crushes or attraction</font></font></div><div id="spoiler3" style="display:none;"><font color="white"><font face="monospace"><b>koikit (koi)___</b> "she's really kind, and i liker her name!" 
 
<b>salmonflame (tanzi)___</b> "she's a gentle she-cat, i enjoy her company." 
 
<b>doekit (tanzi)___</b> "a cute one that is!" 
 
<b>snowbird (snow-bird)___</b> "i trust her with everything. she's always there for me, and i'm so glad to call her a friend. she has a special place in my heart... she knows how to make me smile." 
 
<b>cosmo (vanic)___</b> "i-i feel weird around him.. he makes me burn in a lovely way and he knows his way with words. he's charming too.. but i don't think he feels the same? i've seen him with another.." 
 
<b>ricepaw (freak-show)___</b> "we met awkwardly." 
 
<b>mikasa (nightlystars)___</b> "s-she's a very pretty she-cat, even with that scar of hers. she's the first feline to claim that they trust me... i'm not sure how i feel about her, but there's something."</font></font></div><div id="spoiler4" style="display:none;"><font color="white"><font face="monospace">wip.</font></font></div><font color="white"><font face="monospace"><font size="7">⸰ ⸰ ⸰ ⸰ ⸰</font size> 
 
<br>now turn away, 
 
'cause i'm awful just to see, 'cause all my hair's abandoned all my body 
 
all my agony . . . know that i will never marry, baby i'm just soggy from the chemo, but i'm counting down the days to go 
 
it just ain't living, and i just hope you know, that if you say, goodbye today 
 
i'd ask you to be true, 'cause the hardest part of this is leaving you . . .</font></font></div></td></tbody></table></div>

+0

所有你必須首先了解如何分離代碼的/應用程序關注。 即分隔不同文件中的HTML,CSS和JavaScript部分。 是的,如果你是初學者,這會很困難。但試着按照這樣的行爲練習,以便你能夠維護和搜索代碼中的錯誤。 – Shaggy

+0

這是我在另一個網站的HTML編輯器中使用的代碼。這是一個彈出式窗口,用戶可以使用它們創建的html代碼自行定製。不使用CSS和JavaScript,所以我不必爲它組織任何不同的文件。 – penetratiion

+0

我懷疑,如果你自己寫了這段代碼。 ''width:800px; height:60px; margin:0 auto; border-color:#FFFFFF; border-style:solid; border-width:2px; background-color:#000000; padding:15px;'this is inline css和 'if(document.getElementById('spoiler1').style.display =='none'){document.getElementById('spoiler1').style.display =''} else {document.getElementById('spoiler1') .style.display ='none'}'這是JavaScript – Shaggy

回答

0

回顧('spoiler') .style.

        ^

你有很多多餘的空格您額外的空間