Javascript 单击特定按钮以显示特定id

当我点击一个特定的按钮，然后隐藏其他同级按钮时，我很难理解如何显示一个特定的项目

所以，我有6个按钮

服务1-6

如果有人单击服务1，我希望显示我的

服务显示框

部分（我在页面加载时将其设置为

显示：无

），然后只显示服务1内容

按照我现在的方式，它隐藏了我的同级按钮，不显示

服务显示框

或任何服务区域

我在下面放了一把小提琴

服务按钮-当您单击服务1时

  <div id="service-tabs-container">
    <div class="service-tab-block" id="service_tab1">Service 1</div>
    <div class="service-tab-block" id="service_tab2">Service 2</div>
    <div class="service-tab-block" id="service_tab3">Service 3</div>
    <div class="service-tab-block" id="service_tab4">Service 4</div>
    <div class="service-tab-block" id="service_tab5">Service 5</div>
    <div class="service-tab-block" id="service_tab6">Service 6</div>
  </div>
</div>

服务1
服务2
服务3
服务4
服务5
服务6

我想展示一下：

 <div class="service-item-box" id="service1">
      <div class="service-item-title">Service 1</div>
    </div>

服务1

---

您需要从“服务”选项卡上的id中获取所需的号码，然后将其附加到“服务项目”框的id中：

$('.service-tab-block').click(function() {
    $('.service-tab-block').css({"background":"purple"});
    $(this).css({"background":"#000", "color":"#FFF"});

    //To get the service display box to show
    var item_number = $(this).attr('id').replace('service_tab', '');
    $('#service-display-box').show();
    $('#service'+item_number).show().siblings().hide();
})

---

在您的问题中，您说的是

服务显示框

，但示例代码显示的是

服务项目框

。您能解释或解决这个问题吗？

服务显示框

是该部分的容器/包装。我希望显示它，然后也显示特定的

服务项目框

。我建议将

.service tabs容器

设置为可见，隐藏其子项，然后利用

：target

选择器，谢谢，它修复了选项卡的消失，但是它没有显示

服务显示框

或

服务项目框

@Becky，对不起，我错过了服务显示框，但是服务项目框正在显示（因为ID）。我已经更新了我的代码！谢谢你的帮助！