jquery - 内容在右侧的垂直菜单-6ren

jquery - 内容在右侧的垂直菜单

转载作者：太空宇宙更新时间：2023-11-04 12:05:34

我正在尝试像 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 )？

谢谢，

最佳答案

你是否添加了 bootstrap js，如果没有，那就是问题所在。你也可以使用 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

关于jquery - 内容在右侧的垂直菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29405403/

文章推荐： linux - 使用 awk 时如何识别搜索字符串中的制表符空间？

文章推荐： bash - 在 bash 中创建一个锁定文件以避免重复执行

文章推荐： java - 没有主要 list 属性(Heroku 部署)

文章推荐： python - 更改新目录和文件的权限模式

iframe - 如何在谷歌浏览器中创建侧边栏(右侧)？
似乎这是不可能的，但如果有人提示如何在谷歌浏览器中创建右侧边栏(如 iframe)，任何提示都会有所帮助。谢谢。最佳答案如果你的意思是这样的这是来自 google chrome 实验 api:
c - 如何修剪该数组中的空格(右侧)？
您好，我在用 C 语言解决编程任务时遇到问题。 The funktion "Trim" should replace all spaces at the end of a String with nu
c# - 查找将窗口停靠到左侧/右侧
有什么方法可以找到一个事件(或属性或方法或类似的东西)来检测窗口停靠到左侧或右侧吗？描述: 通过 WindowState 属性，您可以了解当您的窗口在正常/最小化/最大化这三种状态之间改变状态时。在
c++ - 寻找算法来确定一个点是否在圆弧的左侧/右侧
我目前需要找到一个算法来确定一个点是在圆弧的右侧还是左侧。这是以下算法的扩展以包含弧: // isLeft(): tests if a point is Left|On|Right of an i
selenium-webdriver - 如何将窗口位置设置到屏幕的左侧/右侧
我正在使用 Selenium 执行测试，该测试在 3 个浏览器上并行执行。我想以下一种方式定位 window :左侧，右侧和底部，所以基本上我正在寻找与 (start btn+left btn...)
jquery 在表单中插入 div 右侧
如果我有下面的代码，并且我想插入一个带有 jquery 的 div 作为表单标记内的第一个元素，那么最好的方法是什么？ //i want to insert a div here with
python - 排列排序列表中的元素，使所有冗余元素位于列表的左侧/右侧
有没有比这个更好的方法来解决这个问题？ def 渲染(arr): single_elements = [] double_elements = [] for i in xrange(len(arr
html - 右侧 float 元素
Home About
html - 右侧 float 的div无法调整其左侧图像的大小并溢出
我遇到的问题是: www.dondolomemories.it 当调整窗口大小时， Logo 图像直到最后一刻才调整大小，导致可怕的两行菜单溢出。我花了将近 2 个小时尝试大量不同的设置。有人可以帮
右侧 float 下的 CSS
我希望我能很好地解释这一点。我有一个 style="float: right;"的 div在这个 div 中，我有一个包含一些编辑器字段的表。但现在我想要两个文本编辑器框(在 .NET MVC3 @H
html - 右侧 div 的放置和并排设计
如果有人能帮助我解决这个问题，我将不胜感激，因为我无法让它工作。这是我正在努力处理的代码:http://jsfiddle.net/sp91c3nk/ 基本上，我希望右侧导航栏与灰色主要内容区域处于同
css - 在图像的顶部、右侧、底部和左侧对齐文本？
我正在尝试在图像的所有四个边上添加文本，但我无法让正确的文本正确对齐。右边的文字仍然在左边。 fiddle :https://jsfiddle.net/y75L0ww9/ Text on top Te
半高的 css3 阴影框顶部和左侧 + 右侧
我正在尝试为顶部以及左侧和右侧设置 css 阴影，但高度降低。我熟悉模糊/半径，但我希望阴影非常短。 picture from wix template (还不能上传，抱歉) 有人可以帮帮我吗？我看到
html - 如何将按钮放在另一个按钮的(右侧)旁边
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
CSS:想要位置:粘性以将元素放置在其父容器的底部/右侧
请看这个jsfiddle . 我想要与 innerText “嗨!”始终出现在其包含父级的可见部分的底部/右侧。它不应与其父级的内容一起滚动。 HTML: Header
html - 右侧 float 提交
我有一个输入框和一个提交按钮。当我向右浮动提交按钮时，我希望它在与输入字段相同的点结束 - 这是我的意思的一个例子:http://prntscr.com/aggln5 目前，输入和提交在不同的点结束
css - 右侧 float 元素的奇怪填充或边距
我基本上刚刚开始让我的网站响应，但出于某种原因，语言 div (#lang) 设置为向右浮动，正在向右浮动，但在它的右侧有一个小边距。虽然没有填充设置父 div #container，但我无法理解。
html - 右侧 float 框
我目前正在创建一个网站，该网站有一个带有文本等内容的居中框。现在，我还想要一个漂浮在右边的盒子，与我的主盒子有一点缝隙。留个图吧，我画的红框就是我要制作的 float 框。顺便说一句。蓝色方框只是我
css - 右侧 Bootstrap 上的个人资料图片
我不是 UI 开发人员，但这次需要玩 css。为用户配置文件编写表单。我快完成了，但还有一个小问题。问题个人资料图片未正确显示在右侧。因此，第一个字段(组织名称)显示不正确自从过去两个小时以来，
javascript - 卸下右侧和底部/右侧 handle
我有以下脚本: http://jsfiddle.net/rYFEY/12/ 效果很好，除了我需要移除右侧和右下角的 handle ，只留下底部 handle 用于调整大小。目前，如果我点击右 hand

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 内容在右侧的垂直菜单