Question

我有Bootstrap标签，每个标签都有一个内容。我想隐藏“活动”标签的内容，并在我点击标签后显示。如何隐藏内容并在单击选项卡后显示内容。

请指教。提前谢谢！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Enterprise Analytics</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
<!-- Nav tabs -->
<ul class="nav nav-pills pill-marg" role="tablist">
<li role="presentation" class="active"><a class="" href="#orange" aria-controls="3"role="tab" data-toggle="tab">Active Tab Name</a></li>
<li role="presentation"><a class="" href="#apple" aria-controls="tracking"role="tab" data-toggle="tab">Tab Name</a>
</li>
</ul>
  <div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="orange">
             <div class="container">
              <div class="row">Some content</div>
              </div>
             </div>
         
          <div role="tabpanel" class="tab-pane" id="apple">
          <div class="container">
          <div class="row">Some Content2</div>
          </div>
          </div>
          
    </div>

Answer 1

请仔细阅读以下更新的代码。这有助于您解决问题。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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"></script>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

＆＃13;

s它会对你有用。

Answer 2

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
    $(".active").click(function(){
        $(".active_content").show();
    }); 
});
</script>

<style>
.active_content{
display:none;
}
</style>

</head>
<body>

<!-- Nav tabs -->
<ul class="nav nav-pills pill-marg" role="tablist">
    <li role="presentation" class="active"><a class="" href="#orange" aria-controls="3"role="tab" data-toggle="tab">Active Tab Name</a></li>
    <li role="presentation"><a class="" href="#apple" aria-controls="tracking"role="tab" data-toggle="tab">Tab Name</a>
        </li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="orange">
         <div class="container">
          <div class="row active_content">Some content</div>
          </div>
         </div>

      <div role="tabpanel" class="tab-pane" id="apple">
      <div class="container">
      <div class="row">Some Content2</div>
      </div>
      </div>

</div>

</body>
</html>

隐藏Bootstrap选项卡内容

2 个答案: