如何在引导程序中垂直切换侧边栏上的面板标题

Question

侧边栏上带有标题的面板工作正常，但我无法 通过向其添加另一个选项卡来切换标题，这里给出了html，css和要添加到head标签中的链接。我希望具有切换标题功能的同一面板如何实现它。如何使其具有响应性。当我尝试向其添加另一个标题时，第一个标题未显示。

 .panel
    {
    position: relative;
    height:100px;
    }

    .panel-default > .panel-leftheading
    {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    }

    .panel-primary > .panel-leftheading
    {
    color: #fff;
    background-color: #428bca;
    border-color: #428bca;
    }
    .panel-leftheading
    {
    width: 42px;
    padding: 10px 15px;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    float: left;
    height: 100%;
    position: absolute;
    }

     .panel-lefttitle
    {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 15px;
    font-size: 16px;
    color: inherit;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    white-space: nowrap;
    }

    .panel-rightbody
    {
    float: left;
    margin-left: 45px;
    padding: 15px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- ************* --->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> 
   </script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    
    <div class="container">
         
        <div class="row">
      	 <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-leftheading">
              <h3 class="panel-lefttitle">Panel title</h3>
              </div>
             <div class="panel-rightbody">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod .</p>
              </div>
            <div class="clearfix">
            </div>
          </div>
         </div>
        </div>
    </div>

Answer 1

我实现了这一点，对我来说很好。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" 
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="row" style="min-height:300px;"> 
  <div  class="col-sm-6">
    <div class="col-xs-9">
        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="home-vr">Home Tab.</div>
            <div class="tab-pane" id="profile-vr">Profile Tab.</div>
            <div class="tab-pane" id="messages-vr">Messages Tab.</div>
            <div class="tab-pane" id="settings-vr">Settings Tab.</div>
        </div>
    </div> 
</div>
</div>

<style>
.tabs-left,{
 border-bottom: none;
 padding-top: 2px;
}
.tabs-left {
 border-right: 1px solid #ddd;
}

.tabs-left>li, .tabs-right>li {
 float: none;
 margin-bottom: 2px;
}
.tabs-left>li {
 margin-right: -1px;
}

.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
border-bottom-color: #ddd;
border-right-color: transparent;
}

.tabs-left>li>a {
 border-radius: 4px 0 0 4px;
 margin-right: 0;
 display:block;
 }

 .vertical-text {
 margin-top:50px;
 border: none;
 position: relative;
 }
 .vertical-text>li {
  height: 20px;
 width: 120px;
 margin-bottom: 100px;
 }
 .vertical-text>li>a {
 border-bottom: 1px solid #ddd;
 border-right-color: transparent;
 text-align: center;
 border-radius: 4px 4px 0px 0px;
}
 .vertical-text>li.active>a,
  .vertical-text>li.active>a:hover,
 .vertical-text>li.active>a:focus {
  border-bottom-color: transparent;
  border-right-color: #ddd;
  border-left-color: #ddd;
  }
 .vertical-text.tabs-left {
 left: -50px;
}
 .vertical-text.tabs-right {
  right: -50px;
 }

 .vertical-text.tabs-left>li {
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 transform: rotate(-90deg);
  }
 </style>