0
我有一個網站，我正在建設，我想在每個選項卡上使用不同手風琴的選項卡。我已經這樣做了;但是我把它放在其他標籤上的一個標籤。Bootstrap手風琴和標籤導航在一頁中？
我希望它能讓每個標籤都有一組不同的手風琴鏈接，每個標籤都加載不同的東西。
這可能嗎？
（編輯）：這是我到目前爲止有：
的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>beerwinefoodmixer</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<img src="assets/img/bws-logo.png" class="logo"/>
<div class="navbar-header">
</div>
</div>
</nav>
<div class="clearfix"></div>
<figure class="figtail"><img src="assets/img/cocktail.png" class="cocktail"/></figure>
<p class="rwmatch">There are many cocktail varieties, depending on the base spirit you can blend together many different flavours. Click through the tabs below to discover what you can create with some simple ingredients.</p>
<ul class="nav nav-tabs">
<li><a href="#tab-1" role="tab" data-toggle="tab">Scotch Based</a></li>
<li><a href="#tab-2" role="tab" data-toggle="tab">Rum Based</a></li>
<li><a href="#tab-3" role="tab" data-toggle="tab">Vodka Based</a></li>
<li><a href="#tab-4" role="tab" data-toggle="tab">Bourbon Based</a></li>
<li><a href="#tab-5" role="tab" data-toggle="tab">Gin Based</a></li>
</ul>
<br><br>
<div class="tab-content">
<div class="tab-pane" role="tabpanel" id="tab-1">
<p>Recipes for Scotch Go Here.</p>
</div>
<div class="tab-pane" role="tabpanel" id="tab-2">
<div class="rumtab">
<div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1">
<!--panel 1-->
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-1">Bacardi Cocktail:</a>
</h4>
</div>
<div role="tabpanel" class="panel-collapse collapse in item-1">
<div class="panel-body">
<span>50ml Bacardi rum<br />25ml Lime juice<br />10ml Grenadine<br />Shake hard and fine strain<br />
</span>
</div>
</div>
</div>
<!--panel 1-->
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2">Between the sheets:</a>
</h4>
</div>
<div role="tabpanel" class="panel-collapse collapse item-2">
<div class="panel-body">
<span>25ml White Rum<br />25ml Cognac<br />25ml Cointreau<br />5ml Gomme<br />Lemon twist<br />Shake hard and fine strain<br />
</span>
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3">Daiquiri:</a>
</h4>
</div>
<div role="tabpanel" class="panel-collapse collapse item-3">
<div class="panel-body">
<span>50ml Rum<br />25ml Lime juice<br />15ml Sugar Syrup<br />Shake hard and fine strain<br />
</span>
</div>
</div>
</div>
</div>
<div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-2">
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-1">Dark n Stormy:</a>
</h4>
</div>
<div role="tabpanel" class="panel-collapse collapse in item-1">
<div class="panel-body">
<span>50ml Black Rum<br />25ml Lime juice<br />Top with Ginger beer<br />Lime wedge<br />Build in glass<br />
</span>
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-2">El Floridita no.1:</a>
</h4>
</div>
<div role="tabpanel" class="panel-collapse collapse item-2">
<div class="panel-body">
<span>50ml Rum<br />25ml Lime juice<br />10ml gomme<br />10ml Maraschino liqueur<br />Shake hard and fine strain<br />
</span>
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-3">El Presidente:</a>
</h4>
</div>
<div role="tabpanel" class="panel-collapse collapse item-3">
<div class="panel-body">
<span>50ml White Rum 25ml<br />Pineapple juice<br />20ml Lime juice<br />10ml Grenadine<br />Lime wedge<br />Shake hard and fine strain<br />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="tab-3">
<p>Recipes for Vodka Go Here</p>
</div>
<div class="tab-pane" role="tabpanel" id="tab-4">
<p>Recipes for Bourbon Go Here</p>
</div>
<div class="tab-pane" role="tabpanel" id="tab-5">
<p>Recipes for Gin Go Here</p>
</div>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
<br />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav">
<li role="presentation"><a href="index.html"><i class="glyphicon glyphicon-home"></i></a></li>
<li role="presentation"><a href="redwine.html">Red Wine</a></li>
<li role="presentation"><a href="whitewine.html">White Wine</a></li>
<li role="presentation"><a href="beer.html">Craft Beer</a></li>
<li role="presentation"><a href="whitemeat.html">White Meat</a></li>
<li role="presentation"><a href="redmeat.html">Red Meat</a></li>
<li role="presentation"><a href="dessert.html">Dessert</a></li>
</ul>
</div>
</div>
</nav>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
的CSS：
nav.navbar.navbar-default{
background-color:#ED7228;
color:black;
text-align: center;
}
nav.navbar.navbar-default-1{
background-color:#ED7228;
color:black;
text-align: center;
}
div.navbar-header{
display: inline-block;
}
ul.nav.navbar-nav a{
color:#000
}
ul.nav.navbar-nav{
background-color: #ed7228;
display:inline-block;
text-align: center;
}
img.logo{
display:flex;
margin:auto;
height:100px;
}
div.row{
text-align:center;
background-color:#ED7228;
color:#fff;
}
h1.menu{
background-color:#000;
}
div#center.col-md-4{
margin-left:auto;
margin-right:auto;
}
div#bottom-row.row{
}
img.cocktail{
height:150px;
}
div#bottom.row{
background-color:white;
}
img.steak{
height:150px;
}
img.chicken{
height:150px;
}
img.dessert{
height:150px;
}
img.redwine{
height:150px;
}
img.whitewine{
height:150px;
}
img.beer{
height:150px;
}
figure.figred{
margin-left: 150px;
width:150px;
display:inline-block;
}
figure.figwhite{
margin: auto;
height:150px;
width:150px;
display:inline-block;
}
figure.figbeer{
margin-right: 150px;
align:right;
display:inline-block;
}
figure.figchick{
display:inline-block;
margin:auto;
}
figure.figsteak{
display:inline-block;
margin:auto;
}
figure.figdess{
display:inline-block;
margin-left: auto;
}
figure.figtail{
display:inline-block;
margin: auto;
}
h4.BWS{
text-align:center;
}
div.navbar-header{
text-align:center;
}
article.rwmatch{
display:flex;
flex-wrap:wrap;
height:100px;
}
div.col-md-4{
display:initial;
width:500px;
height:150px;
}
p{
display:inline-block;
}
p.rwmatch{
display: inline-block;
width:400px;
text-align:justify;
}
figure.figwhite_1{
width:100px;
margin-right:75px;
margin-left:55px;
display:inline-block;
}
p.wwmatch{
width:400px;
text-align:justify;
}
figure.beer{
display:inline-block;
}
div.imagebox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
p.sectionlink{
margin: auto;
display:inline-block;
}
div.sectionlink-1{
display: flex;
flex-wrap: wrap;
}
div.rumtab{
display:flex;
flex-wrap: wrap;
}
我們不能幫你，直到你分享你的代碼。 –
請參閱上面的編輯。它是我想要實現的和css（css有點混亂）的代碼 –