ای جکسی کردن تب

[reza_yki]

سلام من یه ابزارک به صورت تب طراحی کردم

می خوام وقتی رو هر تب کلیک شد محتواش لود شه
<div class='box-content-big'>
<?php $id = get_the_ID() ; ?>
<div class="box-select">
<a class="active-tab-sidebar" data-id="<?php echo $id; ?>" href="#sidebar-tab-1-<?php echo $id; ?>"><i class="fa fa-star"><span>7 day</span></i></a>
<a href="#sidebar-tab-2-<?php echo $id; ?>"><i class="fa fa-star"><span>30 day</span></i></a>
<a href="#sidebar-tab-3-<?php echo $id; ?>"><i class="fa fa-star"><span>365 day</span></i></a>
</div>
<ul id="sidebar-tab-1-<?php echo $id; ?>" class="tab-sidebar-content clearfix">
محتوای حلقه
</ul>
<ul id="sidebar-tab-2-<?php echo $id; ?>" class="tab-sidebar-content clearfix">
محتوای حلقه
</ul>
<ul id="sidebar-tab-3-<?php echo $id; ?>" class="tab-sidebar-content clearfix">
محتوای حلقه
</ul>
</div>

من سوادم تا این جا رسید که وقتی روی هر تب کلیک شد یه در خواست ای جکس ارسال میشه


میشه راهنمایی کنید؟
$('.box-select a').on('click',function(e){
e.preventDefault();
var $this= $(this);
//$('.box-select a').removeClass('active-tab-sidebar');
//$this.closest('.box-content-big').children('.box-select').find(a).removeClass('active-tab-sidebar');
$this.parents('.box-content-big').find('.box-select a').removeClass('active-tab-sidebar');
$this.addClass('active-tab-sidebar');
var $container = $this.attr('href');
$this.parents('.box-content-big').find($('.tab-sidebar-content')).hide();
$($container).fadeIn(600);
$.ajax({
url : data.ajax_url,
type:'post',
dataType:'json',
data:{
action:'load_most_tab',
post_id : $container,
},
success:function(response){},
error:function(){}
});
});
ممنون از پاسخاتون