Question

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#song">Song</a></li>
  <li id="image-tab"><a href="#image" data-toggle="tab">Image</a></li>
</ul>

<div class="tab-content">
  <div id="image" class="tab-pane fade  ">
    <input class="btn btn-default btn-sm" type="file" name="userfile" id="image">
  </div>
</div>

<div id="song" class="tab-pane fade in active">
  <div class="form-group">
    <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
  </div>
</div>

<div class="form-group">
  <select class="form-control">
    <option value="1">Music</option>
    <option value="2">Photography</option>
    <option value="3">Painting</option>
    <option value="4">Fashion</option>
    <option value="5">Modelling</option>
  </select>
</div>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

当我点击其余部分选择音乐和歌曲标签时，我必须隐藏图像标签。我试图使用CSS显示无，但它没有工作。

Answer 1

您只需要添加和删除引导类fade in和fade。

例如，如果要隐藏歌曲选项卡并显示图像选项卡，则必须执行以下操作：

首先给你选择一个id

<select id="sel" class="form-control">

然后获取所选的值：

<script>
     $('#sel').on('change', function() {
         alert(this.value);
     });
</script>

最后，根据所选值，隐藏并显示标签：

<script>
     $('#sel').on('change', function() {
         if(this.value === 1){
              // hide image tab and show song tab
              $("#image").removeClass("fade in active");
              $("#image").addClass("fade");
              $("#song").removeClass("fade");
              $("#song").addClass("fade in active");
         } else {
              // hide song tab and show image tab
              $("#song").removeClass("fade in active");
              $("#song").addClass("fade");
              $("#image").removeClass("fade");
              $("#image").addClass("fade in active");
         }
     });
</script>

Answer 2

为<select class="form-control" id="my-select">

提供一些ID或类

将id或类提供给歌曲选项卡

<li class="active" id="song-tab"><a data-toggle="tab" href="#song">Song</a></li>

然后检查更改事件。

    $("#my-select").on('change',function(){

    var strSelectedVal = $(this).val();

    $(".nav.nav-tabs li").show();

   if(strSelectedVal=="music"){

        $("#image-tab").hide();

    }else{

        $("#song-tab").hide();
    }
})

Answer 3

为ID添加select：

<select id="select" class="form-control">
  Options
</select>

然后你必须检查所选选项的值，并通过显示另一个标签隐藏图像标签music（我希望你想要更改为歌曲标签）。

$('#select').change(function() {
  if($(this).val() === '1') {
    $('#song-tab').tab('show');
  }
});

我还对您的HTML做了一些小改动。

的 CODEPEN

Answer 4

看看下面的方法：

$(document).ready(function() {
  $(".form-control").change(function() {
    setTabVisibility();
  });

  setTabVisibility();

  function setTabVisibility() {
    var selectedVal = $(".form-control").val();
    if (selectedVal == "1") {
      //Music selected 
      $("a[href='#image']").hide();
      $("div#image").hide().removeClass("in");;

      $("a[href='#song']").show()
      $("div#song").show().addClass("in");

      $('.nav-tabs a[href="#song"]').tab('show');

    } else {
      //other than Music selected 
      $("a[href='#song']").hide();
      $("div#song").hide().removeClass("in");

      $("a[href='#image']").show()
      $("div#image").show().addClass("in");

      $('.nav-tabs a[href="#image"]').tab('show');


    }
  }
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#song">Song</a>
  </li>
  <li id="image-tab"><a href="#image" data-toggle="tab">Image</a>
  </li>
</ul>

<div class="tab-content">
  <div id="image" class="tab-pane fade  ">

    <input class="btn btn-default btn-sm" type="file" name="userfile" id="imageupload">



  </div>


  <div id="song" class="tab-pane fade in active">
    <div class="form-group">
      <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
    </div>

  </div>
</div>

<div class="form-group">
  <select class="form-control">
    <option value="1">Music</option>
    <option value="2">Photography</option>
    <option value="3">Painting</option>
    <option value="4">Fashion</option>
    <option value="5">Modelling</option>
  </select>
</div>

在显示其他标签之前，我们需要hide() Tab的<a>标签以及相应标签内容中的removeClass("in")。

单击选择选项时如何隐藏选项卡

4 个答案:

的 CODEPEN