jQuery基于不同的超链接单击，将类添加到目标div并从其他div部分删除

我正试图点击不同的链接，基于此，我想在目标div上添加一个类，同时也想从其他div部分删除添加的新类

我在这里使用'[data getTarget~=“one”]通过'[data getTarget~=“one”]'获取超链接并指向不同的div

这段代码正在运行，但我觉得可以用更好的方式创建它

$（文档）.ready（函数（）{
//var targetID=document.getElementsByClassName（“stickyCalc”）；
$（'[data getTarget~=“one”]'）。单击（函数（）{
$（“[id^='one']”）addClass（“mySpaceClass”）；
$（“[id^='two']”。removeClass（“mySpaceClass”）；
$（“[id^='three']”）removeClass（“mySpaceClass”）；
$（“[id^='four']”）removeClass（“mySpaceClass”）；
$（“[id^='five']”）removeClass（“mySpaceClass”）；
});
$（'[data getTarget~=“two”]'）。单击（函数（）{
$（“[id^='one']”）removeClass（“mySpaceClass”）；
$（“[id^='two']”）addClass（“mySpaceClass”）；
$（“[id^='three']”）removeClass（“mySpaceClass”）；
$（“[id^='four']”）removeClass（“mySpaceClass”）；
$（“[id^='five']”）removeClass（“mySpaceClass”）；
});
$（'[data getTarget~=“three”]'）。单击（函数（）{
$（“[id^='one']”）removeClass（“mySpaceClass”）；
$（“[id^='two']”。removeClass（“mySpaceClass”）；
$（“[id^='three']”）addClass（“mySpaceClass”）；
$（“[id^='four']”）removeClass（“mySpaceClass”）；
$（“[id^='five']”）removeClass（“mySpaceClass”）；
});
$（'[data getTarget~=“four”]'）。单击（函数（）{
$（“[id^='one']”）removeClass（“mySpaceClass”）；
$（“[id^='two']”。removeClass（“mySpaceClass”）；
$（“[id^='three']”）removeClass（“mySpaceClass”）；
$（“[id^='four']”）addClass（“mySpaceClass”）；
$（“[id^='five']”）removeClass（“mySpaceClass”）；
});
$（'[data getTarget~=“five”]'）。单击（函数（）{
$（“[id^='one']”）removeClass（“mySpaceClass”）；
$（“[id^='two']”。removeClass（“mySpaceClass”）；
$（“[id^='three']”）removeClass（“mySpaceClass”）；
$（“[id^='four']”）removeClass（“mySpaceClass”）；
$（“[id^='five']”）addClass（“mySpaceClass”）；
});
});
.mySpaceClass{
利润率：20px0；
}

| 
| 
| 
| 

标题1
标题2
标题3
标题4
标题5
如果为标题添加容器div，可以这样运行


$（文档）.ready（函数（）{
$（'.stickyCalc a'）。单击（函数（）{
$（'#HeadlineContainer div'）.removeClass（'mySpaceClass'）；
$（“#”+this.getAttribute（'data-gettarget'））.addClass（“mySpaceClass”）
});
});
.mySpaceClass{
利润率：20px0；
}

| 
| 
| 
| 

标题1
标题2
标题3
标题4
标题5
如果为标题添加容器div，可以这样运行


$（文档）.ready（函数（）{
$（'.stickyCalc a'）。单击（函数（）{
$（'#HeadlineContainer div'）.removeClass（'mySpaceClass'）；
$（“#”+this.getAttribute（'data-gettarget'））.addClass（“mySpaceClass”）
});
});
.mySpaceClass{
利润率：20px0；
}

| 
| 
| 
| 

标题1
标题2
标题3
标题4
标题5
您可以向所有目标div添加新类，如下所示--

您可以向所有目标div添加新类，如下所示--

<div class="stickyCalc">
<a href="#" data-getTarget="one"> One </a> | 
<a href="#" data-getTarget="two"> Two </a> | 
<a href="#" data-getTarget="three"> Three </a> | 
<a href="#" data-getTarget="four"> Four </a> | 
<a href="#" data-getTarget="five"> Five </a>
</div>


<hr>

<div class="target" id="one" style="background:green; padding:20px; color:white">
Headline 1
</div>

<div  class="target" id="two" style="background:pink; padding:20px; color:white">
Headline 2
</div>

<div  class="target" id="three" style="background:red; padding:20px; color:white">
Headline 3
</div>

<div  class="target" id="four" style="background:black; padding:20px; color:white">
Headline 4
</div>

<div  class="target" id="five" style="background:blue; padding:20px; color:white">
Headline 5
</div>

$(document).ready(function(){

    //var targetID = document.getElementsByClassName("stickyCalc");
  $(".stickyCalc a").click(function(){

    $(".target").removeClass("mySpaceClass");
    var a =$(this).attr("data-getTarget");

    $("#"+a).addClass("mySpaceClass");
  });


});