内容在右侧的垂直菜单

Question

我正在尝试像 bootstrap 一样制作导航栏药丸。但是不想包括整个 bootstrap css。

这是我目前所做的：

 .dropup,
 .dropdown {
   position: relative;
 }
 
 .dropdown-toggle {
   *margin-bottom: -3px;
 }
 
 .dropdown-toggle:active,
 .open .dropdown-toggle {
   outline: 0;
 }
 
 .caret {
   display: inline-block;
   width: 0;
   height: 0;
   vertical-align: top;
   border-top: 4px solid #000000;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
   opacity: 0.3;
   filter: alpha(opacity=30);
 }
 
 .dropdown .caret {
   margin-top: 8px;
   margin-left: 2px;
 }
 
 .dropdown:hover .caret,
 .open .caret {
   opacity: 1;
   filter: alpha(opacity=100);
 }
 
 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1000;
   display: none;
   float: left;
   min-width: 160px;
   padding: 4px 0;
   margin: 1px 0 0;
   list-style: none;
   background-color: #ffffff;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
   *border-right-width: 2px;
   *border-bottom-width: 2px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
     border-radius: 5px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
     background-clip: padding-box;
 }
 
 .dropdown-menu.pull-right {
   right: 0;
   left: auto;
 }
 
 .dropdown-menu .divider {
   *width: 100%;
   height: 1px;
   margin: 8px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
 }
 
 .dropdown-menu a {
   display: block;
   padding: 3px 15px;
   clear: both;
   font-weight: normal;
   line-height: 18px;
   color: #7a7f83;
   white-space: nowrap;
 }
 
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
   color: #ffffff;
   text-decoration: none;
   background-color: #1eb1e4;
 }
 
 .open {
   *z-index: 1000;
 }
 
 .open > .dropdown-menu {
   display: block;
 }
 
 .pull-right > .dropdown-menu {
   right: 0;
   left: auto;
 }
 
 
 .well, .promobox {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
   background-color: #f9f9f9;
   border: 1px solid #e1e7ec;
   border: 1px solid rgba(0, 0, 0, 0.05);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
     border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
 .well blockquote {
   border-color: #e5e5e5;
   border-color: rgba(0, 0, 0, 0.15);
 }
 
 .well blockquote:before, blockquote.well:before { content:""; content:none;}
 
 .well-large {
   padding: 24px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
     border-radius: 6px;
 }
 
 .well-small {
   padding: 9px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
     border-radius: 3px;
 }
 
 .promobox {
   background: #fdfdfd;
   padding-bottom: 11px;
 }
 .promobox button, .promobox .button {
   float:right;
 }
 
 .collapse {
   position: relative;
   height: 0;
   overflow: hidden;
   -webkit-transition: height 0.35s ease;
   -moz-transition: height 0.35s ease;
    -ms-transition: height 0.35s ease;
     -o-transition: height 0.35s ease;
     transition: height 0.35s ease;
 }
 
 .collapse.in {
   height: auto;
 }
 
 .close {
   float: right;
   font-size: 20px;
   font-weight: bold;
   line-height: 18px;
   color: #000000;
   text-shadow: 0 1px 0 #ffffff;
   opacity: 0.2;
   filter: alpha(opacity=20);
 }
 
 .close:hover {
   color: #000000;
   text-decoration: none;
   cursor: pointer;
   opacity: 0.4;
   filter: alpha(opacity=40);
 }
 
 .nav {
   margin-bottom: 18px;
   margin-left: 0;
   list-style: none;
 }
    
 .nav > li > a {
   display: block;
 }
 
 .nav > li > a:hover {
   text-decoration: none;
   background-color: #e1e7ec;
 }
 
 .nav > .pull-right {
   float: right;
 }
 
 .nav .nav-header {
   display: block;
   padding: 3px 15px;
   font-size: 11px;
   font-weight: bold;
   line-height: 18px;
   color: #999999;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
 }
 
 .nav li + .nav-header {
   margin-top: 9px;
 }
 
 .nav-list {
   padding-right: 15px;
   padding-left: 15px;
   margin-bottom: 0;
 }
 
 .nav-list > li > a,
 .nav-list .nav-header {
   margin-right: -15px;
   margin-left: -15px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 .nav-list > li > a {
   padding: 3px 15px;
 }
 
 .nav-list > .active > a,
 .nav-list > .active > a:hover {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
   background-color: #0088cc;
 }
 
 .nav-list [class^="icon-"] {
   margin-right: 2px;
 }
 
 .nav-list .divider {
   *width: 100%;
   height: 1px;
   margin: 8px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
 }
 .nav-tabs,
 .nav-pills {
   *zoom: 1;
 }
 
 .nav-tabs:before,
 .nav-pills:before,
 .nav-tabs:after,
 .nav-pills:after {
   display: table;
   content: "";
 }
 
 .nav-tabs:after,
 .nav-pills:after {
   clear: both;
 }
 
 .nav-tabs > li,
 .nav-pills > li {
   float: left;
 }
 
 .nav-tabs > li > a,
 .nav-pills > li > a {
   padding-right: 12px;
   padding-left: 12px;
 
   line-height: 14px;
 }
 
 .nav-tabs {
   border-bottom: 1px solid #e5e5e5;
   
 }
 
 .nav-tabs > li {
   margin-bottom: -1px;
   
 }
 
 .nav-tabs > li > a {
   padding-top: 12px;
   background:#f7f7f7;
   padding-bottom: 12px;
   color:#555;
   line-height: 18px;
   border: 1px solid #e5e5e5;
   border-right:0 none;
   font-family:Arial, Helvetica, sans-serif; font-size:13px; 
 
 }
 
 .nav-tabs > li > a:hover {
   background:#fbfbfb;
 }
 
 .nav-tabs > .active > a,
 .nav-tabs > .active > a:hover {
   cursor: default;
   background-color: #ffffff;
   border: 1px solid #e5e5e5;
   border-bottom: 0 none;
   padding-top:20px;
   margin-top:-7px;
   
 }
 
 .nav-pills > li > a {
   padding-top: 8px;
   padding-bottom: 8px;
   margin-top: 2px;
   margin-bottom: 2px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .nav-pills > .active > a,
 .nav-pills > .active > a:hover {
   color: #ffffff;
   background-color: #0088cc;
 }
 
 .nav-stacked > li {
   float: none;
 }
 
 .nav-stacked > li > a {
   margin-right: 0;
 }
 
 .nav-tabs.nav-stacked {
   border-bottom: 0;
 }
 
 .nav-tabs.nav-stacked > li > a {
   border: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
     border-radius: 0;
 }
 
 .nav-tabs.nav-stacked > li:first-child > a {
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
     border-radius: 4px 4px 0 0;
 }
 
 .nav-tabs.nav-stacked > li:last-child > a {
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
     border-radius: 0 0 4px 4px;
 }
 
 .nav-tabs.nav-stacked > li > a:hover {
   z-index: 2;
   border-color: #e5e5e5;
 }
 
 .nav-pills.nav-stacked > li > a {
   margin-bottom: 3px;
 }
 
 .nav-pills.nav-stacked > li:last-child > a {
   margin-bottom: 1px;
 }
 
 .nav-tabs .dropdown-menu {
   -webkit-border-radius: 0 0 5px 5px;
   -moz-border-radius: 0 0 5px 5px;
     border-radius: 0 0 5px 5px;
 }
 
 .nav-pills .dropdown-menu {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
     border-radius: 4px;
 }
 
 .nav-tabs .dropdown-toggle .caret,
 .nav-pills .dropdown-toggle .caret {
   margin-top: 6px;
   border-top-color: #0088cc;
   border-bottom-color: #0088cc;
 }
 
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
   border-top-color: #005580;
   border-bottom-color: #005580;
 }
 
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
   border-top-color: #333333;
   border-bottom-color: #333333;
 }
 
 .nav > .dropdown.active > a:hover {
   color: #000000;
   cursor: pointer;
 }
 
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover {
   color: #ffffff;
   background-color: #999999;
   border-color: #999999;
 }
 
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
 .nav li.dropdown.open a:hover .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
   opacity: 1;
   filter: alpha(opacity=100);
 }
 
 .tabs-stacked .open > a:hover {
   border-color: #999999;
 }
 
 .tabbable {
   *zoom: 1;
 }
 
 .tabbable:before,
 .tabbable:after {
   display: table;
   content: "";
 }
 
 .tabbable:after {
   clear: both;
 }
 
 .tab-content {
   overflow: auto;
   border:1px solid #e5e5e5;
   border-top:0 none;
   padding-top:18px;
   margin-top:-18px; 
 }
 
 .tab-content .columns {
    max-width:100%;
    }
  
 .tab-content .columns p {
    padding:0;
    }
 
 .tabs-below > .nav-tabs,
 .tabs-right > .nav-tabs,
 .tabs-left > .nav-tabs {
   border-bottom: 0;
 }
 
 .tab-content > .tab-pane,
 .pill-content > .pill-pane {
   display: none;
   padding:15px 25px;
 }
 
 .tab-content > .active,
 .pill-content > .active {
   display: block;
 }
 
 .tabs-below > .nav-tabs {
   border-top: 1px solid #e5e5e5;
 }
 
 .tabs-below > .nav-tabs > li {
   margin-top: -1px;
   margin-bottom: 0;
 }
 
 .tabs-below > .nav-tabs > li > a {
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
     border-radius: 0 0 4px 4px;
 }
 
 .tabs-below > .nav-tabs > li > a:hover {
   border-top-color: #e5e5e5;
   border-bottom-color: transparent;
 }
 
 .tabs-below > .nav-tabs > .active > a,
 .tabs-below > .nav-tabs > .active > a:hover {
   border-color: transparent #e5e5e5 #e5e5e5 #e5e5e5;
 }
 
 .tabs-left > .nav-tabs > li,
 .tabs-right > .nav-tabs > li {
   float: none;
 }
 
 .tabs-left > .nav-tabs > li > a,
 .tabs-right > .nav-tabs > li > a {
   min-width: 190px;
   margin-right: 0;
   margin-bottom: 3px;
   text-transform:uppercase;
   font-size:12px;
   font-weight:bold;
   border-left:0 none;
   background:#fdfdfd;
   color:#838383;
 }
 
 .tabs-left > .nav-tabs {
   float: left;
   margin-right:-1px;
   padding-top:40px;
 }
 
 .tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
  border: 1px solid #e5e5e5;
  padding:10px;
  margin:0;
  border-left:0 none;

 }
 
 .tabs-left > .nav-tabs > li > a:hover {
   border-bottom:1px solid #e5e5e5;
   color:#444;
 }
 
 .tabs-left > .nav-tabs .active > a,
 .tabs-left > .nav-tabs .active > a:hover {
   border-bottom:1px solid #e5e5e5;
   border-right-color: #ffffff;
   padding:10px;
   border-left:0 none;
   margin:0;
   color:#333;
   background:#fff;
 }
 
 .tabs-right > .nav-tabs {
   float: right;
   border-left: 1px solid #e5e5e5;
 }
 
 .tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
  border: 1px solid #e5e5e5;
 }
 
 .tabs-right > .nav-tabs > li > a:hover {
   border-color: #e5e5e5 #e5e5e5 #e5e5e5 #e5e5e5;
   border-width:1px;
 }
 
 .tabs-right > .nav-tabs .active > a,
 .tabs-right > .nav-tabs .active > a:hover {
   border-color: #e5e5e5 #e5e5e5 #e5e5e5 transparent;
   *border-left-color: #ffffff;
 }
 .tabs-right > .tab-content,
 .tabs-left > .tab-content,
 .tabs-below > .tab-content {
   margin:0;
   padding:4px;
   padding-top:10px;
   display:block;
   border:0 none;
   border-left:1px solid #e5e5e5;
   box-shadow : 0 0 0 0;
 }
 
 .tabs-below > .tab-content {
   border:1px solid #e5e5e5;
   border-bottom:0 none;
   }
 
 
 .tooltip {
   position: absolute;
   z-index: 1020;
   display: block;
   padding: 5px;
   font-size: 11px;
   opacity: 0;
   filter: alpha(opacity=0);
   visibility: visible;
 }
 
 .tooltip.in {
   opacity: 0.8;
   filter: alpha(opacity=80);
 }
 
 .tooltip.top {
   margin-top: -2px;
 }
 
 .tooltip.right {
   margin-left: 2px;
 }
 
 .tooltip.bottom {
   margin-top: 2px;
 }
 
 .tooltip.left {
   margin-left: -2px;
 }
 
 .tooltip.top .tooltip-arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
   border-top: 5px solid #000000;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
 }
 
 .tooltip.left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 5px solid #000000;
 }
 
 .tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-right: 5px solid transparent;
   border-bottom: 5px solid #000000;
   border-left: 5px solid transparent;
 }
 
 .tooltip.right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
   border-top: 5px solid transparent;
   border-right: 5px solid #000000;
   border-bottom: 5px solid transparent;
 }
 
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
   color: #ffffff;
   text-align: center;
   text-decoration: none;
   background-color: #000000;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
     border-radius: 4px;
 }
 
 .tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
 }
 
 
 .pull-right {
   float: right;
 }
 
 .pull-left {
   float: left;
 }
 
 .hide {
   display: none;
 }
 
 .show {
   display: block;
 }
 
 .invisible {
   visibility: hidden;
 }
 
 .pagination2 {
   height: 36px;
   margin: 18px 0;
 }
 
 .pagination2 ul {
   display: inline-block;
   *display: inline;
   margin-bottom: 0;
   margin-left: 0;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
     border-radius: 3px;
   *zoom: 1;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .pagination2 li {
   display: inline;
 }
 
 .pagination2 a {
   float: left;
   padding: 0 14px;
   line-height: 34px;
   text-decoration: none;
   border: 1px solid #e5e5e5;
   border-left-width: 0;
 }
 
 .pagination2 a:hover,
 .pagination2 .active a {
   background-color: #f5f5f5;
 }
 
 .pagination2 .active a {
   color: #999999;
   cursor: default;
 }
 
 .pagination2 .disabled span,
 .pagination2 .disabled a,
 .pagination2 .disabled a:hover {
   color: #999999;
   cursor: default;
   background-color: transparent;
 }
 
 .pagination2 li:first-child a {
   border-left-width: 1px;
   -webkit-border-radius: 3px 0 0 3px;
   -moz-border-radius: 3px 0 0 3px;
     border-radius: 3px 0 0 3px;
 }
 
 .pagination2 li:last-child a {
   -webkit-border-radius: 0 3px 3px 0;
   -moz-border-radius: 0 3px 3px 0;
     border-radius: 0 3px 3px 0;
 }
 
 .pagination2-centered {
   text-align: center;
 }
 
 .pagination2-right {
   text-align: right;
 }
 
 
 .alert {
   padding: 8px 35px 8px 36px;
   background:url(../images/alert-notice-ico.png) no-repeat;
   background-position: 9px 50%;
   margin-bottom: 18px;
   color: #c09853;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   background-color: #fcf8e3;
   border: 1px solid #f3d9a6;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
     border-radius: 2px;
 }
 
 .alert img {
    float: left;
    margin:-2px 6px 4px -4px;
    }
 
 .alert-heading {
   color: inherit;
 }
 
 .alert .close {
   position: relative;
   top: -2px;
   right: -21px;
   line-height: 18px;
 }
 
 .alert-success {
   color: #468847;
   background:url(../images/alert-success-ico.png) no-repeat;
   background-position: 8px 50%;
   background-color: #e1eec9;
   border-color: #8fbe32;
 }
 
 .alert-danger,
 .alert-error {
   color: #b94a48;
   background:url(../images/alert-error-ico.png) no-repeat;
   background-position: 9px 50%;
   background-color: #fce6e9;
   border-color: #ed9aa3;
 }
 
 .alert-info {
   color: #3a87ad;
   background:url(../images/alert-info-ico.png) no-repeat;
   background-position: 9px 50%;
   background-color: #d9edf7;
   border-color: #98cdd8;
 }
 
 .alert-block {
   padding-top: 14px;
   padding-bottom: 14px;
 }
 
 .alert-block > p,
 .alert-block > ul {
   margin-bottom: 0;
 }
 
 .alert-block p + p {
   margin-top: 5px;
 }
 
 button.close {
  padding:0;
  margin:0;
  border:0;
  background:none;
  }
 
 table {
   max-width: 100%;
   background-color: transparent;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 .table {
   width: 100%;
   margin-bottom: 18px;
 }
 
 .table th,
 .table td {
   padding: 8px;
   line-height: 18px;
   text-align: left;
   vertical-align: top;
   border-top: 1px dotted #e5e5e5;
 }
 
 .table th {
   font-weight: bold;
 }
 
 .table thead th {
   vertical-align: bottom;
   border-top:0 none;
   background:#f7f7f7;
 }
 
 
 .table tbody + tbody {
   border-top: 2px solid #e5e5e5;
 }
 
 .table-condensed th,
 .table-condensed td {
   padding: 4px 5px;
 }
 
 .table-bordered {
   border: 1px solid #e5e5e5;
   border-collapse: separate;
   *border-collapse: collapsed;
   border-left: 0;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
     border-radius: 4px;
 }
 
 .table-bordered th,
 .table-bordered td {
   border-left: 1px solid #e5e5e5;
 }
 
 
 .table tbody tr:hover td,
 .table tbody tr:hover th {
   background-color: #fcfcfc;
 }
 
 @-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
 
 @-moz-keyframes progress-bar-stripes {
   from {
  background-position: 40px 0;
   }
   to {
  background-position: 0 0;
   }
 }
 
 @-ms-keyframes progress-bar-stripes {
   from {
  background-position: 40px 0;
   }
   to {
  background-position: 0 0;
   }
 }
 
 @-o-keyframes progress-bar-stripes {
   from {
  background-position: 0 0;
   }
   to {
  background-position: 40px 0;
   }
 }
 
 @keyframes progress-bar-stripes {
   from {
  background-position: 40px 0;
   }
   to {
  background-position: 0 0;
   }
 }
 
 .progress {
   height: 32px;
   margin-bottom: 18px;
   overflow: hidden;
   background-color: #f7f7f7;
   background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
   background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
   background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
   background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
   background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
   background-repeat: repeat-x;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
     border-radius: 4px;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .progress .bar {
   width: 0;
   height: 34px;
   font-size: 15px;
   line-height:33px;
   color: #ffffff;
   text-align: left;
   padding-left:12px;
   background-color: #0e90d2;
   background-repeat: repeat-x;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     box-sizing: border-box;
   -webkit-transition: width 0.6s ease;
   -moz-transition: width 0.6s ease;
    -ms-transition: width 0.6s ease;
     -o-transition: width 0.6s ease;
     transition: width 0.6s ease;
 }
 
 
 .progress .bar small { color:#fafafa; font-size:12px; }
 
 .progress-striped .bar {
   background-color: #149bdf;

 }
 
 .progress.active .bar {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
   -moz-animation: progress-bar-stripes 2s linear infinite;
    -ms-animation: progress-bar-stripes 2s linear infinite;
     -o-animation: progress-bar-stripes 2s linear infinite;
     animation: progress-bar-stripes 2s linear infinite;
 }
 
 .progress-danger .bar, .progress-red .bar {
   background-color: #e53f51;

 }
 
 .progress-success .bar, .progress-green .bar {
   background-color: #8fbe32;

 }
 
 .progress-info .bar, .progress-blue .bar {
   background-color: #03acdc;

 }
 
 .progress-warning .bar, .progress-orange .bar {
   background-color: #f98805;
 }

<ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#Specifications" data-toggle="tab">Specifications</a></li>
        <li><a href="#Application" data-toggle="tab">Application</a></li>
  <li><a href="#Packing" data-toggle="tab">Packing</a></li>
      </ul>
<div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="Specifications">
          
         <table>
  <tbody><tr>
    <td><strong>Chemical Formula</strong></td>
  
    <td>CH<span class="style14">3</span>=C(CH<span class="style15">3</span>)COOCH<span class="style15">3</span></td>
  </tr>
  <tr>
    <td><strong>Colour (APHA)</strong></td>
   
    <td>10 max.</td>
  </tr>
  <tr>
    <td><strong>Specific Gravity @ 20°C</strong></td>
    
    <td>0.942 To 0.946</td>
  </tr>
  <tr>
    <td><strong>Acidity (as methcrylic acid)5</strong></td>

    <td>0.005 Max.</td>
  </tr>
  <tr>
    <td><strong>Purity % (G.C. Method)</strong></td>

    <td>99.6 Min.</td>
  </tr>
  <tr>
    <td><strong>Water (by Karl fisher)%</strong></td>
 
    <td>0.05 Max.</td>
  </tr>
  <tr>
    <td><strong>Inhibitor HQ</strong></td>

    <td>35 ppm</td>
  </tr>
 
</tbody></table>
        </div>
        <div class="tab-pane" id="Application">
          <hr class="vertical-space1">
     <h5><strong>Application </strong></h5>
   <ul class="arrow magic">
        <li>Semi-finished products like rods, tubes and sheets</li>
        <li> Moulding and extrusion resins</li>
        <li> Dental Prosthesis</li>
        <li> Paints , Adhesives , Lacquers, Enamels and water proofing agent.</li>
        <li> Textile Auxiliaries and sizing materials</li>
        <li>Leather finishing resins</li>
        <li> Polymer impregnated concrete</li>
        <li>PVC modifiers</li>
        <li>Addivite for lubricating and industrial oils</li>
         </ul>
        </div>   

<div class="tab-pane" id="Packing">
          <hr class="vertical-space1">
     <h5><strong>Packing </strong></h5>
   <ul class="arrow magic">
        <li>190 Kg. HM-HDPE Barrels</li>
       
         </ul>
        </div>   
        
      </div>

它看起来很好，但它不工作。我的意思是它没有切换内容。

我这里做错了什么？有没有其他方法可以实现这个（没有 bootstrap）？

谢谢，

Answer 1

你有没有添加bootstrapjs，如果没有那就是问题所在。您也可以使用 jquery

编写自己的 js 来执行此操作

    $(document).ready(function ()
{
    $('.nav a').click(function ()
    {
        $('.nav li').removeClass('active');
        $('.tab-pane').hide();
        $(this).parent().addClass('active');
        $('#'+($(this).attr('href').split('#')[1])).show(); 

    });
});

demo

内容在右侧的垂直菜单

Vertical Menu with content on its right

jquery

html

css

twitter-bootstrap

nav-pills