JQuery clickable div使用通配符切换内容

我正在尝试创建一组可点击的div（“card_ABC110-”），以便在“产品详细信息”区域切换显示其各自的内容。id根据其类别代码（即ABC、BBC等）在循环中生成。因此，以“card_ABC110-”开头的当前id组接下来可能会变成“card_BBC221-*”

为了获得用于切换的确切id，我不知道如何编写JQuery来使用通配符提取部分id名称，并使用循环中的变量类别代码

下面是我的重复HTML块：

<div class="product-cards">
    <div id="card_ABC110-AD" class="displayCardSelected">
        <a href="#cardDetail_ABC110-AD">ABC110-AD</a><br>
            ABC 110 (AD)
    </div>
    <div id="card_ABC110-BG" class="displayCard">
        <a href="#cardDetail_ABC110-BG">ABC110-BG</a><br>
            ABC 110 (BG)
    </div>
    <div id="card_ABC110-CE" class="displayCard">
        <a href="#cardDetail_ABC110-CE">ABC110-CE</a><br>
            ABC 110 (CE)
    </div>                                          
</div>

<div class="product-Detail">
    <div id="cardDetail_ABC110-AD" class="content" style="display: block;">
    Product ABC110-AD Info
    </div>  
    <div id="cardDetail_ABC110-BG" class="content" style="display: none;">
    Product ABC110-BG Info
    </div>
    <div id="cardDetail_ABC110-CE" class="content" style="display: none;">
    Product ABC110-CE Info
    </div>
</div>

ABC 110（广告）


ABC 110（背景）


ABC 110（行政长官）
产品ABC110-AD信息
产品ABC110-BG信息
产品ABC110-CE信息

谢谢

$（“a”）。单击（函数（）{
var elemId=$（this.attr（'href'））
$（'.product Detail div'）.hide（）；
$（elemId.show（）；
});


ABC 110（广告）

ABC 110（背景）

ABC 110（行政长官）
产品ABC110-AD信息
产品ABC110-BG信息
产品ABC110-CE信息
我的回答解决了你的问题吗？