Как я могу передать значение активной вкладки в функции поиска JavaScript?

Question

В настоящее время я создаю функцию поиска и хочу передать дополнительный параметр в URL-адрес поиска на основе активной вкладки.

К этому времени я могу передавать только выбранные значения раскрывающихся списков на каждой вкладке, но не могу передавать значение выбранной вкладки.

PS .: Не против укладки, на моем сайте все нормально. Javascript - моя главная забота.

Вот мой HTML и Javascript код:

$('#submit').on('click', function(search) {
  search.preventDefault();
  var url = 'http://www.example.com/?s=';
  var fields = new Array("size", "color");
  fields.forEach(function(f) {
    var v = $('#' + f).val();
    if (v != '0') {
      url = url + f + '[' + v + ']' + ',';
    }
  });
  window.location.href = url;
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <ul id="tabs" class="nav nav-tabs htabs">
    <li class="active">
      <a href="#tshirt" id="tshirt" value="TSHIRT" data-toggle="tab">T-shirts</a>
    </li>
    <li class="active">
      <a href="#jacket" id="jacket" value="JACKET" data-toggle="tab">Jackets</a>
    </li>
  </ul>
</div>


<div class="tabs-content">
  <div class="tab-pane tab-content active" id="tshirt">
    <div class="row">
      <div class="xs-50 sm-50 md-33">
        <select id="size" class="form-control">
          <option value>--Select size--</option>
          <option value="xl">XLarge</option>
          <option value="xxl">XXLarge</option>
        </select>
      </div>
       <div class="xs-50 sm-50 md-33">
        <select id="color" class="form-control">
          <option value>--Select color--</option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
      </div>
      <div class="button-group btn">
        <input id="submit" class="btn" name="submit" value="Search" type="submit">
      </div>
    </div>
  </div>
  <div class="tab-pane tab-content active" id="jacket">
    <div class="row">
      <div class="xs-50 sm-50 md-33">
        <select id="size" class="form-control">
          <option value>--Select size--</option>
          <option value="sm">Small</option>
          <option value="l">Large</option>
        </select>
      </div>
      <div class="xs-50 sm-50 md-33">
        <select id="color" class="form-control">
          <option value>--Select color--</option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
      </div>
      <div class="button-group btn">
        <input id="submit" class="btn" name="submit" value="Search" type="submit">
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Answer 1

Этот код работает для меня, это то, что вы впервые опубликовали (html) с кодом JavaScript, который должен делать то, что вам нужно. Разве это не работает для вас?

<div class="row">
  <ul id="tabs" class="nav nav-tabs htabs">
    <li class="active">
      <a href="#tshirt" id="tshirt" value="TSHIRT" data-toggle="tab">T-shirts</a>
    </li>
    <li class="active">
      <a href="#jacket" id="jacket" value="JACKET" data-toggle="tab">Jackets</a>
    </li>
  </ul>
</div>


<div class="tabs-content">
  <div class="tab-pane tab-content active" id="tshirt">
    <div class="row">
      <div class="xs-50 sm-50 md-33">
        <select id="size" class="form-control">
          <option value>--Select size--</option>
          <option value="xl">XLarge</option>
          <option value="xxl">XXLarge</option>
        </select>
      </div>
       <div class="xs-50 sm-50 md-33">
        <select id="color" class="form-control">
          <option value>--Select color--</option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
      </div>
      <div class="button-group btn">
        <input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick()">
      </div>
    </div>
  </div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script>
    function myclick() {
      var url = window.location.href ;
      var hash = url.substring(url.indexOf("#")+1);
      var mysize = document.getElementById("size").value;
      var mycolor = document.getElementById("color").value;

      window.location.href = "http://www.test.com/?tab=" + hash + "&Size=" + mysize + "&mycolor=" + mycolor;
  }
</script>

Обновленная версия

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <ul id="tabs" class="nav nav-tabs htabs">
      <li>
          <button type="button" class="btn btn-link" onclick="mytype('TSHIRT')">T-shirts</button>
      </li>
      <li>
          <button type="button" class="btn btn-link" onclick="mytype('JACKET')">Jackets</button>
      </li>
    </ul>
  </div>


  <div class="tabs-content">
    <div class="tab-pane tab-content" id="tshirt" style="display:none">
      <div class="row">
        <div class="xs-50 sm-50 md-33">
          <select id="tshirtsize" class="form-control">
            <option value>--Select size--</option>
            <option value="xl">XLarge</option>
            <option value="xxl">XXLarge</option>
          </select>
        </div>
        <div class="xs-50 sm-50 md-33">
          <select id="tshirtcolor" class="form-control">
            <option value>--Select color--</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
          </select>
        </div>
        <div class="button-group btn">
          <input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick('tshirt')">
        </div>
      </div>
    </div>
    <div class="tab-pane tab-content" id="jacket" style="display:none">
      <div class="row">
        <div class="xs-50 sm-50 md-33">
          <select id="jacketsize" class="form-control">
            <option value>--Select size--</option>
            <option value="sm">Small</option>
            <option value="l">Large</option>
          </select>
        </div>
        <div class="xs-50 sm-50 md-33">
          <select id="jacketcolor" class="form-control">
            <option value>--Select color--</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
          </select>
        </div>
        <div class="button-group btn">
          <input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick('jacket')">
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script>
  var passtype;

  function mytype(mytype) {
      switch (mytype) {
        case "TSHIRT":
            passtype = "TSHIRT";
            document.getElementById("tshirt").style.display = "block";
            document.getElementById("jacket").style.display = "none";
            break;
        case "JACKET":
            passtype = "JACKET";
            document.getElementById("jacket").style.display = "block";
            document.getElementById("tshirt").style.display = "none";
    }
  }

  function myclick(mytype) {

    var url = window.location.href ;
    var mysize = document.getElementById(mytype + "size").value;
    var mycolor = document.getElementById(mytype + "color").value;
    window.location.href = "results&searchfilter=category['" + mytype + "'],size['"+ mysize +"'],color['"+ mycolor +"']";

}
</script>