JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="people">
    <div id="people">
        <ul>
            <li> <a href="#" data-toggle="#business">Business</a>
            </li>
            <li> <a href="#" data-toggle="#highlife">Highlife</a>
            </li>
        </ul>
    </div>
    <div id="business">
      <ul>
            <li> <a href="#" data-toggle="#people">People</a>
            </li>
            <li> <a href="#" data-toggle="#highlife">Highlife</a>
            </li>
        </ul>
    </div>
    <div id="highlife">
        <ul>
            <li> <a href="#" data-toggle="#people">People</a>
            </li>
            <li> <a href="#" data-toggle="#business">Business</a>
            </li>
        </ul>
    </div>
</div>

CSS

#business, #highlife {
    display:none;
}

JavaScript

jQuery("a[data-toggle]").on("click", function (e) {
       e.preventDefault(); // prevent navigating
       var target = $(this).data('toggle');
       $('.people > div').hide();
       $('.people ' + target).fadeIn();
   });