隐藏元素Javascript

时间:2018-03-05 10:50:19

标签: javascript jquery

我的代码可以很好地隐藏标签。但是如何隐藏选项卡的内容?



$('#hasCustomerUITab').hide();


$('#customerUI').change(function () {
        if ($(this).is(":checked")) {
            $('#hasCustomerUITab').show();
        }
        else {
            $('#hasCustomerUITab').hide();
            $('input[name="customerUIBranch"]').val(null);
        }
    });
   
   $('#submit').click(function() {
    console.log($('input[name="customerUIBranch"]').val());
   
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="checkbox checkbox-primary">
  <input type="checkbox" id="customerUI" name="hasCustomerUI">
  <label for="customerUI">Customer UI</label>
</div>

<div class="row">
  <div class="col-sm-10">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#customerUIContent" id="hasCustomerUITab" style="" aria-expanded="true">Customer UI</a></li>
    </ul>
    <div class="tab-content tab-content-border">
      <div id="hostContent" class="tab-pane fade">
        <div id="customerUIContent" class="tab-pane fade active in">
          <div class="scrollableBranches">
            <div class="form-group">

              <div class="radio radio-info increase-size">
                <input type="radio" value="" name="customerUIBranch" id="customerUIBranch1" data-error="Please, choose one option">
                <label for="customerUIBranch1">build-setup
                                                        </label>
              </div>

              <div class="radio radio-info increase-size">
                <input type="radio" value="" name="customerUIBranch" id="customerUIBranch2" data-error="Please, choose one option">
                <label for="customerUIBranch2">master
                                                        </label>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<button id="submit">Submit</button>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

对于内容标签

$('#hasCustomerUITab .tab-content').show();

答案 1 :(得分:0)

您可以直接使用内容ID进行隐藏:例如

$('#hostContent').hide();

或者 从Tab而不是conten Id:

$('#customerUI #hostContent').hide();