如何根据选项卡滑块中单击的选项卡更改div id？

Question

我想在Wordpress中动态更改我的标签滑块的代码。

所有图片都来自帖子。单击任何图像应该在选项卡中显示，因此我使用了计数器，并希望根据计数器值更改ID。

while ($posts_array->have_posts()) {
    $posts_array->the_post();
    $large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'project-thumb');
    $images = get_multi_images_src('medium', 'large', false, get_the_ID());
    $counter = 1;
    $str = '<div class="slide">' 
    . '<div class="col-lg-7 col-sm-12 col-xs-12">'

    //<!-- Tab panes-->
    . '<div id="myTabContent" class="tab-content">'
    . '<div class="tab-pane fade active in" id="1" >'
    . ' <img src="' . $images['image1'][1][0] . '" alt="" class="img-responsive">'
    . '</div>'
    .'</div>'
    . '<ul id="myTab" class="row">';

    foreach ($images as $image) {
        $str.= '<li class="col-lg-3 col-sm-3 col-xs-3 "><a href="#' . $counter . '"  data-toggle="tab"><img src="' . $image[0][0] . ' " class="img-responsive"> </a></li>';

        $counter++;
    }

---

$('#myTab a').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
});

$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
    var new_id = $(e.target).attr("href").substr(1);
    alert(new_id);

    $('.tab-content').attr('id', 'new_id');
});