JSFiddle - React, Tailwind, and code Playground

by HoffZ

HTML

<div id="navigation">
            <ul>
                <li><a class="navSelected NavigationItem" href="#" >Section 1</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 2</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 3</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 4</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 5</a><span>ben</span></li>
            </ul>
        </div>

  <img class="prev" src="img/prev.gif" alt="prev" width="42" height="53" />
  <img class="next" src="img/next.gif" alt="next" width="42" height="53" />

CSS

.navSelected { color:red; }

JavaScript

$('.next').click(function() {
    $('#navigation li a.navSelected').removeClass('navSelected')
        .parent().next().find('a.NavigationItem').addClass('navSelected');
});