javascript - 列表更改 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 playerlists当点击 gilde 按钮时，它应该显示 gildelist提前致谢。

Answer 1

您必须更改元素的显示 状态。这可以用纯 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()" 的按钮(相同与另一个)。

享受吧。