Hide Bootstrap標籤內容

我有Bootstrap標籤，每個標籤都有一個內容。我想隱藏「活動」標籤的內容，並在點擊標籤後才顯示。如何先隱藏內容並在點擊標籤後顯示它。Hide 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>

來源

2017-06-15 jakonda

<!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>

來源

2017-06-15 16:07:28

葛麗泰！謝謝。如何點擊「活動」選項卡並將再次隱藏內容？ – jakonda

請通過下面的更新的代碼。這將幫助你解決你的問題。

<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>

S和它會爲你工作。

來源

2017-06-15 15:28:20

我試過這種解決方案，但我想單擊回到選項卡上，並將再次隱藏內容。謝謝你！ – jakonda

Hide Bootstrap標籤內容

回答

相關問題