你好 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 提前致谢。
最佳答案
您必须更改元素的显示
状态。这可以用纯 JavaScript 完成,不需要 jQuery。
将这两个元素都放入您的 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"
(与玩家列表相同)。现在你必须写一个函数来改变你的显示状态 已通过 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()"
的按钮(相同 与另一个)。
享受吧。
关于javascript - 列表更改 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40695838/