时间戳

首页 > 解决方案 > 通过javascript同时更改css的最佳方法？

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

问题描述

我有这个 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 执行此操作的最简单方法是什么？

标签： javascripthtmljquerycss

解决方案

你可以用几行 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>

推荐阅读