title: Prev/Next Buttons for Navigation Links
body: <p>I'm looking for a solution to have Previous and Next arrows that would cycle through the navigation links. Similar to the link below but when you click Prev Or Next you, it would take you to the next anchor in the nav li and load the new page.</p>
  
  <pre><code> &lt;div id="nav" class="text-spacing"&gt;
    &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="/news.html" class="nav-button"&gt;News&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/tourdates.html" class="nav-button"&gt;Tour Dates&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/music.html" class="nav-button navSelected"&gt;Music&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/video" class="nav-button"&gt;Video&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/about" class="nav-button"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/contact" class="nav-button"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="arrow-left" class="slide-right"&gt;&lt;a href="#" class="prev-button" title="Previous"&gt;&lt;img src="images/arrow-left.png" alt="Left Arrow" width="25" height="48"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div id="arrow-right" class="slide-left"&gt;&lt;a href="#" class="next-button" title="Next"&gt;&lt;img         src="images/arrow-right.png" alt="Right Arrow" width="25" height="48"&gt;&lt;/a&gt;&lt;/div
  
  $(document).ready(function () {
      $('.next-button').click(function () {
          var $el = $('#nav li a.navSelected').removeClass('navSelected');
          var $next = $el.parent().next();
  
          if ($next.length == 0) $next = $('#nav li:first');
  
          $next.find('a.nav-button').addClass('navSelected');
      });
  
  
      $('.prev-button').click(function () {
          var $el = $('#nav li a.navSelected').removeClass('navSelected');
          var $prev = $el.parent().prev();
  
          if ($prev.length == 0) $prev = $('#nav li:last');
  
          $prev.find('a.nav-button').addClass('navSelected');
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Zevan/H2hjr/" rel="nofollow">http://jsfiddle.net/Zevan/H2hjr/</a></p>
  
  <p><strong>Home</strong> | Music | Videos | Contact</p>
  
  <p>Prev // Next </p>