javascript - 使用元素 ID 的 JQuery 选项卡

Question

我有两个按钮和两个带段落的 div。我想创建选项卡，但我不知道如何在单击按钮时显示 div。问题是我无法添加任何新类或 ID。我必须使用可用的类和 ID。我正在寻找使用按钮和 div ID 的解决方案。

例如:

第一个按钮的 ID 为“tab_button_one”，第一个 div 的 ID 为 input_one。有没有办法使用“_one”表单 ID 创建选项卡切换？

<button id="tab_button_one" class="btn active-button">Button one</button>
<button id="tab_button_two" class="btn">Button two</button>

<div id="input_one" class="input active-input">
  <p>input one</p>
</div>

<div id="input_two" class="input">
  <p>input two</p>
</div>


<style>
.btn{
  background-color: transparent;
  border: 1px solid #000;
  padding: 10px;
  color: #000;
  cursor: pointer;
}

.btn.active-button{
  background-color: #0000b2;
  border-color: #0000b2;
  color: #fff;
}

.input{
  border: 1px solid #000;
  padding: 10px;
  margin: 10px 0;
  display: none;
}

.input.active-input{
  display: block;
}

</style>

<script>
  $('.btn').click(function(){
    if( $(this).hasClass('active-button') == false){
      var id = $(this).attr('id');
      $('.btn').removeClass('active-button');
      $(this).addClass('active-button');  
            $('.input').removeClass('active-input');
    }
  });
</script>

https://jsfiddle.net/7hotd8z2/2/

Answer 1

假设 ID 始终遵循以下结构，您可以按照这些思路做一些事情:

 $('.btn').click(function(){
    if( $(this).hasClass('active-button') == false){
      var id = $(this).attr('id').split('_')[2];
      $('.btn').removeClass('active-button');
      $(this).addClass('active-button');  
      $('.input').removeClass('active-input');
      $('#input_'+id).addClass('active-input');
    }
  });

这似乎与您使用选项卡所做的一致。