javascript - 单击特定按钮以显示特定 ID

Question

我在尝试弄清楚如何在单击特定按钮然后隐藏其他同级按钮时显示特定元素时遇到问题。

所以，我有 6 个按钮。

服务 1-6

如果有人点击服务 1，我希望我的 service-display-box 部分出现(我在页面加载时将其设置为 display:none)然后只显示服务 1 内容。

我现在的方式是，它隐藏了我拥有的同级按钮，并且不显示 service-display-box 或任何服务区域。

我在下面包含了一个 fiddle 。

服务按钮 - 当您点击服务 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>

我想展示这个:

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

Fiddle

Answer 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();
})

https://jsfiddle.net/esayoaqg/1/