使用相同的id添加类到div，使用jquery显示块

Question

每当.active对应的.inner-thumb-container设置为.detail-box时，尝试在display: block上添加// show different div based on image map hover jQuery("#career-img-wrap a[data-toggle]").click(function(e) { e.preventDefault(); var selector = $(this).data("toggle"); jQuery(".inner-thumb-container").removeClass('active'); jQuery(this).find(".inner-thumb-container").addClass('active'); jQuery(".detail-box").hide(); jQuery(".detail-box" + "#" + selector).show().addClass('animated fadeIn'); }); 课程。我有两个使用类似代码的块，以便在移动和桌面视图上修改布局。

这是我到目前为止所拥有的。工作正常，直到窗口调整大小...

jQuery的：

<div class="mobile-hide">
    <div class="row">
        <div class="col-md-6 text-center thumb-container">
            {careers_benefits}
                    {careers_benefits:switch="<div class='row'>|"}
                    <div class="col-md-6" id="career-img-wrap">
                        <a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
                            <div class="inner-thumb-container {if careers_benefits:field_row_count == 1}active{/if}">
                                <img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
                                <p>{careers_benefits:title}</p>
                            </div>
                        </a>
                    </div>
                    {if careers_benefits:field_row_count != careers_benefits:field_total_rows}{careers_benefits:switch="|</div>"}{/if}
                    {if careers_benefits:field_row_count == careers_benefits:field_total_rows}</div>{/if}
            {/careers_benefits} 
        </div>
        {careers_benefits}
        <div class="col-md-6 career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
            <div class="career-thumb-content-inner">
                <h3>{careers_benefits:title}</h3>
                {careers_benefits:content}
            </div>
        </div>
        {/careers_benefits} 
    </div>
</div>

<div class="mobile-show">
    <div class="row">
        <div class="col-md-12 text-center thumb-container">
            {careers_benefits}
                <div id="career-img-wrap">
                    <a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
                        <div class="inner-thumb-container">
                            <img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
                            <p>{careers_benefits:title}</p>
                        </div>
                    </a>
                </div>
                <div class="career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
                    <div class="career-thumb-content-inner">
                        <h3>{careers_benefits:title}</h3>
                        {careers_benefits:content}
                    </div>
                </div>
            {/careers_benefits} 
        </div>
    </div>
</div>

HTML（用ExpressionEngine编写）：

.mobile-hide {
    display: block;
}

.mobile-show {
    display: none;
}

@media (max-width: 992px){
    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: block;
    }

CSS：

calc(%100 - 200px);