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

我想在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++;
    }

---

您确定在（“show.bs.tab”上，函数（e）{}工作正常吗？错误是图像未根据单击的图像进行更改，或者我还想将图像源数组image1数组src=“.”.$images['image1'][1][0]”更改为图像单击id…就像第三个图像单击此$images['image3'][1][0]

$('#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');
});