我试图用10个不同的面板和2个选项卡分别设置我的页面，但是，每当我单击第二个面板选项卡时，它都会更改第一个？如何允许我的页面具有多个面板，我需要设置单独的CSS？
我尝试过分割div，但是那样会导致css出现问题。
前两个面板：
.panel-tabs {
position: relative;
bottom: 30px;
clear: both;
border-bottom: 1px solid transparent;
}
.panel-tabs>li {
float: left;
margin-bottom: -1px;
}
.panel-tabs>li>a {
margin-right: 2px;
margin-top: 4px;
line-height: .85;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
color: #ffffff;
}
.panel-tabs>li>a:hover {
border-color: transparent;
color: #ffffff;
background-color: transparent;
}
.panel-tabs>li.active>a,
.panel-tabs>li.active>a:hover,
.panel-tabs>li.active>a:focus {
color: #fff;
cursor: default;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: rgba(255, 255, 255, .23);
border-bottom-color: transparent;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-6 " div id="1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Griddled chicken fajitas with squashed avocado</h3>
<h5>Prep: 15mins | Cook: 5mins | Serves: 2 | Easy</h5>
<span class="pull-right">
<!-- Tabs -->
<ul class="nav panel-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Ingredients</a></li>
<li><a href="#tab2" data-toggle="tab">Method</a></li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<ul>
<li> 2 garlic cloves, finely grated</li>
<li>150g pot plain bio yogurt</li>
<li>½ tsp smoked paprika</li>
<li>¼ tsp ground cumin</li>
<li>¼ tsp ground coriander</li>
<li>¼ tsp oregano</li>
<li>200g mini chicken breast fillets</li>
<li>2 tomatoes, chopped</li>
<li>1 small red onion, finely chopped</li>
<li>1 green chilli, deseeded and finely chopped (optional)</li>
<li>4 tbsp chopped fresh coriander</li>
<li>juice 1 lime</li>
<li>2 seeded tortillas</li>
<li>1 avocado, halved and stoned</li>
</ul>
</div>
<div class="tab-pane" id="tab2">
<ol>
<li>Stir the garlic into the yogurt. Spoon 2 tbsp into a medium bowl, add the spices and oregano, and stir well. Add the chicken and toss until coated.</li>
<br>
<li>Heat a griddle pan and griddle the chicken for 5 mins, turning once, until cooked all the way through but still moist. (If you want to fry the chicken, wipe a little oil in a non-stick pan first or the spices will burn.)</li>
<br>
<li>Mix the tomatoes with the onion, chilli (if using), coriander and lime to taste. Heat the tortillas following pack instructions. Scoop the flesh from the avocado, squash half on top of each tortilla, then add the chicken and the salsa salad. Spoon over the garlicky yogurt, roll up and eat while still hot.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 " div id="2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">3-veg mac 'n' cheese</h3>
<h5>Prep: 10mins | Cook: 40mins | Serves: 4 | Easy</h5>
<span class="pull-right">
<!-- Tabs -->
<ul class="nav panel-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Ingredients</a></li>
<li><a href="#tab2" data-toggle="tab">Method</a></li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<ul>
<li>150g butternut squash, cut into chunks
<li>300g penne (we used Napolina 50% white 50% wholemeal)</li>
<li>40g butter</li>
<li>1 small leek, finely sliced (about 50g)</li>
<li>25g flour</li>
<li>600ml milk</li>
<li>100g frozen peas</li>
<li>175g mature Cheddar cheese (we used a vegetarian version)</li>
<li>1 slice day-old brown bread, blitzed into crumbs</li>
</ul>
</div>
<div class="tab-pane" id="tab2">
<ol>
<li> Heat oven to 200C/fan 180C/gas 6. Put the butternut squash in a steamer over boiling water. Steam for around 15-20 mins or until tender. Drain and then blitz in a food processor until smooth.</li>
<br>
<li>Cook the pasta according to the pack instructions.</li>
<br>
<li>Heat the butter in a medium saucepan, add the leek and cook for 2 mins. Stir in the flour and cook for 1-2 mins more. Take the pan off the heat and gradually whisk in the milk. Return to the heat and bring to the boil, stirring all the time. Simmer for 5 mins. Stir in the peas and bring back to a simmer. Take the pan off the heat and stir in the butternut squash, then 125g cheese.</li>
<br>
<li>Stir the pasta into the sauce and transfer to an ovenproof dish. Sprinkle over the remaining cheese and the breadcrumbs. Bake for 20 mins or until golden and bubbling.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
我希望每个面板的标签都可以单独工作
答案 0 :(得分：0)
第二个面板应该是
<li class="active"><a href="#p2tab1" data-toggle="tab">Ingredients</a></li>
<li><a href="#p2tab2" data-toggle="tab">Method</a></li>
第二个面板的第一个标签
<div class="tab-pane active" id="p2tab1">
第二个面板的第二个标签
<div class="tab-pane" id="p2tab2">