文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >把手风琴和带标签的导航放在一页里？

问把手风琴和带标签的导航放在一页里？
EN

Stack Overflow用户
提问于 2017-07-26 08:21:08
回答 1查看 448关注 0票数 0

我有一个网站，我正在建设，我想有标签导航与不同的手风琴的东西在每个标签。我做过这件事，但是我把一个标签放在另一个标签上。

我想要它，这样每个选项卡都有一个不同的手风琴链接集，每个选项卡加载不同的东西。

这个是可能的吗？

(编辑)：以下是我到目前为止的情况：

html：

代码语言：javascript
复制
<!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：

代码语言：javascript
复制
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;
}
twitter-bootstrap
bootstrap-accordion
tabbed-interface
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-27 05:50:46

将整个html替换为以下内容，您没有正确关闭</div>。

试试这个：

代码语言：javascript
复制
<!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 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-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>
                    <!--panel 3-->
                    <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">
                    <!--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-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>
                    <!--panel 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-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>
                    <!--panel 3-->
                    <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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45321259

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档