javascript - 通过javascript同时更改css的最佳方法？

Question

我有这个 HTML。

<div class="rankings-wrapper">

  <div class="top-header">
    <a id="qb" href="#">QB</a>
    <a id="rb" href="#">RB</a>
    <a id="wr" href="#">WR</a>
    <a id="te" href="#">TE</a>
    <a id="dst" href="#">D/ST</a>
  </div>

<div class="player-info-wrapper">

    <div id="qb-wrapper" class="qb-wrapper">

      <div class="player-info">
      <h4>Player Name</h4>
      <p>QBs and other various football terms. QBs and other various football terms. QBs and other various football terms.
         QBs and other various football terms. QBs and other various football terms. QBs and other various football terms.</p>
      </div>


    <div id="rb-wrapper" class="rb-wrapper">

      <div class="player-info">
      <h4>Player Name</h4>
      <p>RBs and other various football terms. RBs and other various football terms. RBs and other various football terms.
         RBs and other various football terms. RBs and other various football terms. RBs and other various football terms.</p>
      </div>
    </div>

      
    <div id="wr-wrapper" class="wr-wrapper">

      <div class="player-info">
      <h4>Player Name</h4>
      <p>WRs and other various football terms. WRs and other various football terms. WRs and other various football terms.
         WRs and other various football terms. WRs and other various football terms. WRs and other various football terms.</p>
      </div>

    </div>



    <div id="te-wrapper" class="te-wrapper">

      <div class="player-info">
      <h4>Player Name</h4>
      <p>TEs and other various football terms. TEs and other various football terms. TEs and other various football terms.
         TEs and other various football terms. TEs and other various football terms. TEs and other various football terms.</p>
      </div>


      <div id="dst-wrapper" class="dst-wrapper">

        <div class="player-info">
        <h4>Player Name</h4>
        <p>D/STs and other various football terms. D/STs and other various football terms. D/STs and other various football terms.
           D/STs and other various football terms. D/STs and other various football terms. D/STs and other various football terms.</p>
        </div>

      </div>

我有一个排名框，我希望我的 CSS 仅在单击标题中的 QB 时显示 QB 信息，并隐藏其余部分。我也希望当我点击 RB、TE 等时发生同样的事情。通过 Javascript 执行此操作的最简单方法是什么？

Answer 1

您可以使用几行 Jquery 来做到这一点。

首先，您应该隐藏所有包装器，您可以通过使用 .hide-wrappers 向所有元素添加一个额外的类来轻松完成此操作，这样您就可以一次隐藏所有它们。

之后，您必须为此所有 URL 添加点击事件，点击事件将触发一些额外的 JQuery，仅显示所需的 Wrapper。

<script>
$('.hide-wrapper').hide();

$('.top-header a').click(function(){
  $('.hide-wrapper').hide();
  var wrapperId = $(this).attr('id');

  $('.'+wrapperId+'-wrapper').show();
});
</script>

<div class="rankings-wrapper">
  <div class="top-header">
    <a id="qb" href="#">QB</a>
    <a id="rb" href="#">RB</a>
    <a id="wr" href="#">WR</a>
    <a id="te" href="#">TE</a>
    <a id="dst" href="#">D/ST</a>
  </div>
</div>

<div class="player-info-wrapper">

  <div id="qb-wrapper" class="qb-wrapper hide-wrapper">
    <div class="player-info">
      <h4>Player Name</h4>
      <p>QBs and other various football terms. QBs and other various football terms. QBs and other various football terms.
         QBs and other various football terms. QBs and other various football terms. QBs and other various football terms.</p>
    </div>
  </div>

  <div id="rb-wrapper" class="rb-wrapper hide-wrapper">
    <div class="player-info">
      <h4>Player Name</h4>
      <p>RBs and other various football terms. RBs and other various football terms. RBs and other various football terms.
         RBs and other various football terms. RBs and other various football terms. RBs and other various football terms.</p>
    </div>
  </div>

  <div id="wr-wrapper" class="wr-wrapper hide-wrapper">
    <div class="player-info">
      <h4>Player Name</h4>
      <p>WRs and other various football terms. WRs and other various football terms. WRs and other various football terms.
         WRs and other various football terms. WRs and other various football terms. WRs and other various football terms.</p>
    </div>
  </div>

  <div id="te-wrapper" class="te-wrapper hide-wrapper">
    <div class="player-info">
      <h4>Player Name</h4>
      <p>TEs and other various football terms. TEs and other various football terms. TEs and other various football terms.
         TEs and other various football terms. TEs and other various football terms. TEs and other various football terms.</p>
    </div>
  </div>

  <div id="dst-wrapper" class="dst-wrapper hide-wrapper">
    <div class="player-info">
      <h4>Player Name</h4>
      <p>D/STs and other various football terms. D/STs and other various football terms. D/STs and other various football terms.
         D/STs and other various football terms. D/STs and other various football terms. D/STs and other various football terms.</p>
    </div>
  </div>

</div>