Nav Pills without whole Bootstrap
HTML
<div class="lol">
Chemical Formula CH3=C(CH3)COOCH3
Colour (APHA) 10 max.
Specific Gravity @ 20°C 0.942 To 0.946
Acidity (as methcrylic acid)5 0.005 Max.
Purity % (G.C. Method) 99.6 Min.
Water (by Karl fisher)% 0.05 Max.
Inhibitor HQ 35 ppm
Chemical Formula CH3=C(CH3)COOCH3
Colour (APHA) 10 max.
Specific Gravity @ 20°C 0.942 To 0.946
Acidity (as methcrylic acid)5 0.005 Max.
Purity % (G.C. Method) 99.6 Min.
Water (by Karl fisher)% 0.05 Max.
Inhibitor HQ 35 ppm
Chemical Formula CH3=C(CH3)COOCH3
Colour (APHA) 10 max.
Specific Gravity @ 20°C 0.942 To 0.946
Acidity (as methcrylic acid)5 0.005 Max.
Purity % (G.C. Method) 99.6 Min.
Water (by Karl fisher)% 0.05 Max.
Inhibitor HQ 35 ppm
Chemical Formula CH3=C(CH3)COOCH3
Colour (APHA) 10 max.
Specific Gravity @ 20°C 0.942 To 0.946
Acidity (as methcrylic acid)5 0.005 Max.
Purity % (G.C. Method) 99.6 Min.
Water (by Karl fisher)% 0.05 Max.
Inhibitor HQ 35 ppm
Chemical Formula CH3=C(CH3)COOCH3
Colour (APHA) 10 max.
Specific Gravity @ 20°C 0.942 To 0.946
Acidity (as methcrylic acid)5 0.005 Max.
Purity % (G.C. Method) 99.6 Min.
Water (by Karl fisher)% 0.05 Max.
Inhibitor HQ 35 ppm
</div>
<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>
...
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:...
JavaScript
$(document).ready(function ()
{
$('.nav a').click(function ()
{
$('.nav li').removeClass('active');
$('.tab-pane').hide();
$(this).parent().addClass('active');
$('#'+($(this).attr('href').split('#')[1])).show();
});
});