Question

How do you remove and add a class to both the below lists simultaneously for the coresponding list item in order on click. eg click the 2nd list item and the change occurs on the second list item on the other list

At the moment using the below I can only get this to happen on one of the li tags on any one click

$(document).ready(function() {

  $("ul.control li, ul.markers li").click(function() {
      $("ul.control li").removeClass("active"); 
      $(this).addClass("active");
      $("ul.markers li").removeClass("active"); 
      $(this).addClass("active"); 

});

Here is the markup for the two lists

<ul id="tabs" class="control">
    <li class="active"><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
    <li><a href="#tab4">Tab4</a></li>
</ul>


<ul id="tabs" class="markers">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Many thanks in advance for any help.

Answer 1

since jquery is kind enough to expose the index function, you could consider this:

$(document).ready(function() 
{    
    $("ul.control li, ul.markers li").click(function() 
    {
      var index = $(this).index();      
      $("ul.control li").removeClass("active"); 
      $("ul.markers li").removeClass("active"); 
      $("ul.control li:eq("+index+")").addClass('active');      
      $("ul.markers li:eq("+index+")").addClass('active');            
    });
});