使用Javascript更改HTML代碼顯示/隱藏

我已經嘗試了幾個不同的東西，包括switch語句，使用JQuery等進行追加，並且我無法使用該按鈕進行操作。我所試圖做的是從P2改變的話：使用Javascript更改HTML代碼顯示/隱藏

Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to show more information about me.

到：

Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to hide more information about me.

我必須做同樣的事情「課程，」但我想，如果我能理解第一一，我可以自己做第二次看/躲。我現在很困惑：/

我認爲它與span標籤有關，但我真的在我的HTML第一週，並沒有學到什麼可能是真正簡單的程序這樣的事情呢。我會很感激任何和所有的幫助，我可以幫助我弄清楚這一點。

<!DOCTYPE html> 
<html> 
<head> 
    <title>About me</title> 
    <style> 
    body 
    { 
     background-color:#ADD8E6; 
    } 

    #p3 
    { 
     display:none; 
    } 
    #myImage 
    { 
     width:280px; 
     height:280px; 
    } 
    #schedule 
    { 
     width: 100%; 
     display:none; 

    } 
    </style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script language = "javascript" > 
    function changeImage() 
    { 


     var image = document.getElementById('myImage'); 

     if (image.src.match("hrgswitch")) 
     { 
     image.src = "hrg.jpg"; 
     } 
     else 
     { 
     image.src = "hrgswitch.jpg"; 

     } 


    } 

    function toggle1(obj) 
    { 
     if(obj == "me") 
     { 
     if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "") 
     { 

      document.getElementById("p3").style.display = "block"; 



     } 

} 
     else 
     { 
      document.getElementById("p3").style.display = "none"; 
     } 


     } 
     else if (obj == "courses") 
     { 
     if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "") 
     { 
      document.getElementById("schedule").style.display = "block"; 
     } 
     else 
     { 
      document.getElementById("schedule").style.display = "none"; 
     } 

     } 
    } 


</script> 

</head> 

<body> 

<h1> My Page </h1> 

<img id="myImage" onclick="changeImage();" src="hrg.jpg" /> 

<p title="About Me"> 
Stuff about me <br> 

<a href="http://www.w3schools.com/" target="_blank">Here is a link to learn more about HTML!</a> 
<br> 
<br> 
</p> 



<p id = "p2"> 
    <br> 
    <br> 
    Please push <button id = "me" onclick = "toggle1('me');">this </button> to see more information about me. 
    <br> 
    <br> 
    Please push <button id = "courses" onclick = "toggle1('courses');">this </button> to see my list of courses." 
</p> 

<p id = "p3" > 


More stuff about me... 
<br> 

</p> 



<br> 


<table id = "schedule"> 
    <tr> 
    <td>Course Name</td> 
    <td>Date</td>  
    <td>Time</td> 
    </tr> 
    <tr> 
    <td>Programming Paradigms</td> 
    <td>Tuesday/Thursday</td>  
    <td>11:00-12:15</td> 
    </tr> 
    <tr> 
    <td>Computer Organization</td> 
    <td>Tuesday/Thursday</td>  
    <td>9:30-10:45</td> 
    </tr> 

<tr> 
    <td>Linear Algebra</td> 
    <td>Monday/Wednesday/Friday</td>   
    <td>11:50-12:40</td> 
    </tr> 

<tr> 
    <td>Combinatorics </td> 
    <td>Monday/Wednesday/Friday</td>   
    <td>8:35-9:25</td> 
    </tr> 

</table> 


</body> 
</html>

來源

2014-10-27 GiH

如果您使用的是JQuery，您可以使用'.hide（）'和'.show（）'等方法。同樣的道理'.toggle（）'可以做到這一點，但是在被調用時可以來回翻轉。 sooo'document.getElementById（「p3」）。show（）'而不是使用'block'。 – Austin 2014-10-27 16:25:02

而不是直接更改顯示屬性，您可以考慮設置一個不添加任何內容的css類。這樣，所有你必須關心的是添加或刪除類。 – scrappedcola 2014-10-27 16:25:32

您可以通過簡單地使用span來爲P2單詞指定一個類，然後使用jQuery單擊函數和html函數替換文本。 http://api.jquery.com/click/和http://api.jquery.com/html/ – Hozikimaru 2014-10-27 16:29:42

在函數toggle1中有一個語法錯誤。刪除不需要的括號。試試這個：

<script language = "javascript" > 
    function toggle1(obj) 
    { 
     if(obj == "me") 
     { 
     if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "") 
     { 

      document.getElementById("p3").style.display = "block"; 



     } 

     else 
     { 
      document.getElementById("p3").style.display = "none"; 
     } 


     } 
     else if (obj == "courses") 
     { 
     if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "") 
     { 
      document.getElementById("schedule").style.display = "block"; 
     } 
     else 
     { 
      document.getElementById("schedule").style.display = "none"; 
     } 

     } 
    } 


</script>

但是，如果你正在使用jQuery，toggle是一個內置的功能。這是非常簡單的（內聯JS - 儘管推薦爲獨立腳本）：刪除您toggle1功能，改變你的兩個HTML的onclick屬性：

Please push <button id = "me" onclick = "$('#p3').toggle()">this </button> to see more information about me. 

Please push <button id = "courses" onclick = "$('#schedule').toggle()">this </button> to see my list of courses.

來源

2014-10-27 16:28:49 tika

感謝您的回覆！我計劃在一會兒編輯大括號。至於jQuery和切換，有沒有辦法改變看到隱藏或隱藏沒有看到，因爲這是我的代碼是如何設置到目前爲止？我想我真的不知道該怎麼做。如果一切都失敗了，我必須使用jQuery來簡化操作，那麼如何實現可以改變看到並隱藏在切換上的部分？對不起，如果我問得太多，我只是很想理解。感謝你的寶貴時間。 – GiH 2014-10-27 21:19:45

@ Heather，你問'show（）'和'hide（）'而不是'toggle（）'。這樣可行。但是，我不認爲我理解你的問題。 – tika 2014-10-29 19:03:09

可能使用jQuery，沿着這些線路的東西更容易...

`<script`> 
function showhide() { 
$("#showhide").text("hide"); 
} 
`</script`> 


<p>Please push this to <span id="showhide">show</span> more information about me. </p> 
<button onclick="showhide()">Hi</button>

來源

2014-10-27 16:56:05

使用Javascript更改HTML代碼顯示/隱藏

回答

相關問題