我在尝试弄清楚如何在单击特定按钮然后隐藏其他同级按钮时显示特定元素时遇到问题。
所以,我有 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>
最佳答案
您需要从所需服务选项卡上的 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();
})
关于javascript - 单击特定按钮以显示特定 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37166524/