Question

Hello 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。

将两个元素都放入JavaScript中。注意执行加载DOM内容后，必须发生JavaScript文件（更多的信息： https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded）。
```
var playerList = document.getElementById ("playerslists");
var guildList = document.getElementById ("guildlist");
```
请注意，目前您正在使用类。更改元素 class="guildlist"至id="guildlist"（播放器列表相同）。

现在你必须编写一个函数来改变你的显示状态已通过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";
  }
}

调用上述函数将在两个元素之间切换。由于您有两个按钮，您可能希望显式编写两个函数，一次切换一个，但上面的代码应该向您展示如何处理基础知识。
我已经添加了您应该用于单个交换机之间的代码状态。使用这些功能一次更改一个。他们适用 CSS样式一次一个元素。
```
function showPlayerList () {    
  playerList.style.display = "block"; 
  guildList.style.display = "none";  
}

function showGuildList () {   
  guildList.style.display = "block";  
  playerList.style.display = "none"; 
}
```
这两个功能一次切换一个。将它们分配给您的按钮通过HTML属性onclick="showGuildList()"（相同与另一个）。

享受。

列表更改onclick

1 个答案: