Best way to simultaneously change css through javascript?

You can do that with some few lines of Jquery.

First of all you should hide all wrappers, you can do this easy by adding an extra class to all element with .hide-wrappers So you can hide all of them at once.

After that, you have to add a click event to all the URL's for this, the click event will trigger some extra JQuery that only shows the needed 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>

Not sure if it's the best soultion.

You can also change the radio buttons to regular buttons. Don't know about <a> though, I think it's not the best for this case.

const wrapper = document.getElementById('wrapper');
function show(ev) {
    const idToShow = ev.target.value + '-wrapper';
    for (const child of wrapper.children) {
        if (child.id == idToShow) {
            child.style.display = 'block';
        } else {
            child.style.display = 'none';
        }
    }
}

.some-wrapper {
    display: none;
}

<div class="s">
    <fieldset onchange="show(event)">
        <input value="a" type="radio" name="group1">A
        <input value="b" type="radio" name="group1">B
        <input value="c" type="radio" name="group1">C
        <input value="d" type="radio" name="group1">D
        <input value="e" type="radio" name="group1">E
        <input value="f" type="radio" name="group1">F
        <input value="g" type="radio" name="group1">G
    </fieldset>
</div>
<div id="wrapper">
    <div id="a-wrapper" class="some-wrapper">A</div>
    <div id="b-wrapper" class="some-wrapper">B</div>
    <div id="c-wrapper" class="some-wrapper">C</div>
    <div id="d-wrapper" class="some-wrapper">D</div>
    <div id="e-wrapper" class="some-wrapper">E</div>
    <div id="f-wrapper" class="some-wrapper">F</div>
    <div id="g-wrapper" class="some-wrapper">G</div>
</div>