列表更改onclick

Question

你好stackoverflow社區， 我在psd上練習html css我有 現在它是我點擊一個按鈕和一個列表必須更改爲其內容的部分 這裏是一個圖像，可能會澄清事物 http://prntscr.com/d9al1x ，這裏是我的網站鏈接，如果你想檢查元素www.sheetmulching.com/karios

這裏是我的html

<div class="content_rightside"> 
     <a id="spieler" href="javascript:;"><img src="images/spieler.png" style="display:inline-block;"></a> 
     <a id="gilde" href="javascript:;"><img src="images/gilde.png" style="display:inline-block;"></a> 
     <div class="playerslists"> 
      <ul>  
      <li><a href="javascript:;"><span class="number">1</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">2</span><span class="playername">Spieler</span><span class="score"><img src="images/Shinsoo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">3</span><span class="playername">Spieler</span><span class="score"><img src="images/Jinno.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">4</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">5</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">6</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">7</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">8</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">9</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">10</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      </ul> 
     </div> 


     <div class="guildlist" style="display:none;"> 
      <ul>  
      <li><a href="javascript:;"><span class="number">1</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">2</span><span class="playername">Gilde</span><span class="score"><img src="images/Shinsoo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">3</span><span class="playername">Gilde</span><span class="score"><img src="images/Jinno.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">4</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">5</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">6</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">7</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">8</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">9</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      <li><a href="javascript:;"><span class="number">10</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li> 
      </ul> 
     </div> 
     <a href="javascript:;"><img src="images/alles.png"></a> 
     </div> 

</div> 

和我的CSS

.content_rightside { width: 270px; 
    float: left; 
    margin-left: -10px; 
    margin-top:-550px;} 

     .playerslists{ font-family:"Times New Roman"; margin-top:5px; font-size:15px;} 

.playerslists ul li{ margin:8px 0px; padding: 5px 10px; border-bottom:solid 1px transparent} 
    .playerslists ul li:hover{ background:#27304f; } 
    .playerslists .number{ float:left; margin-right: 15px; color:#FFFFFF; } 
    .playerslists .playername{ color:#FFFFFF; } 
    .playerslists .score{ float:right; color:#FFFFFF; margin-top:-10px;} 
    .playerslists a{ text-decoration:none;} 

我認爲這可以在jQuery中完成，但我對此不夠了解！ 當spieler按鈕點擊時，它應該顯示id球員列表 ，當點擊gilde按鈕時，它應該顯示gildelist 在此先感謝。

Answer 1

您必須更改元素的狀態display。這可以用純JavaScript完成，不需要jQuery。

1. 將兩個元素都放入JavaScript中。請注意，執行 JavaScript文件必須在加載DOM內容後發生 （更多信息： https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded）。

   var playerList = document.getElementById ("playerslists"); 
   var guildList = document.getElementById ("guildlist"); 
   

   請注意，目前您正在使用類。將元素從 class="guildlist"更改爲id="guildlist"（對於玩家列表相同）。

2. 現在你必須編寫一個函數來改變你通過CSS（style="display: none;"）設置的 的顯示狀態。對於這一點，使用一個 肘節功能：

   function toggleLists() { 
       if (guildList.style.display == "none") { 
       guidList.style.display = "block"; 
       playerList.style.display = "none"; 
       } else { 
       guidList.style.display = "none"; 
       playerList.style.display = "block"; 
       } 
   } 
   

3. 調用上述功能將在兩個元件之間切換。既然你有兩個按鈕，你可能想要明確地寫出兩個函數一次一個地切換，但是上面的代碼應該會告訴你如何處理基礎知識。

4. 我已經添加了您應該用於 狀態之間的單個開關的代碼。使用這些功能一次更改一個。他們將 CSS樣式應用於每個元素。

   function showPlayerList() {  
       playerList.style.display = "block"; 
       guildList.style.display = "none"; 
   } 
   
   function showGuildList() { 
       guildList.style.display = "block"; 
       playerList.style.display = "none"; 
   } 
   

   這兩個函數一次切換一個。通過HTML屬性onclick="showGuildList()"（與另一個相同的 ）將它們分配給您的 按鈕。

享受。