Complex CSS selector for parent of active child [duplicate]

Answer 1

I actually ran into the same issue as the original poster. There is a simple solution of just using .parent() jQuery selector. My problem was, I was using .parent instead of .parent(). Stupid mistake I know.

Bind the events (in this case since my tabs are in Modal I needed to bind them with .live instead of a basic .click.

$('#testTab1 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab1 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})
$('#testTab2 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab2 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})

Here is the HTML..

  
  

    
Modal Header
    

    

      
 Tab Title Link
        

          

            
Your Tab Content
            
tabBased Anchor Link 
          
          
 
        
      
      
 Tab Title Link
        

          

            
Your Tab Content
            
tabBased Anchor Link 
          
          
 
        
      
    
  

Of course you can repeat that pattern..with more LI's