Question

在点击特定按钮然后隐藏其他兄弟姐妹时，我无法弄清楚如何显示特定项目。

所以，我所拥有的是6个按钮。

服务1-6

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

我现在的方式，它隐藏了我的兄弟按钮，并没有显示service-display-box或任何服务区域。

我在下面加了一个小提琴。

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

点击特定按钮以显示特定ID

1 个答案: