<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<nav id="target_nav">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#1" role="tab" data-toggle="tab">Description</a></li>
<li><a href="#2" role="tab" data-toggle="tab">Features</a></li>
<li><a href="#3" role="tab" data-toggle="tab">Reviews (6)</a></li>
</ul>
</nav>
<div class="tab-content" id="scrollable" data-spy="scroll" data-target="#target_nav">
<div>
<div class="tab-pane fade in active" id="1">
<div>
The TAG Heuer Men's Aquaracer 500 M Calibre 5 Automatic Black Dial Watch is a versatile, eye-catching timepiece that easily accompanies both office and athletic attire. The case, bezel, and band of this durable watch are made of stainless steel, which handsomely offsets the bold black dial and pays complement to its luminous hands and hourly indexes.
</div>
<div>
For convenience, an easy-to-read date window is set at the three o'clock position. The Swiss Automatic movement of this watch means it's automatically powered by the natural movement of your arm, so you never need to change a battery.
</div>
<div>
With a durable antireflective-sapphire crystal and water resistance to a depth of 984 feet (300 meters), the Aquaracer is a fine timepiece that is made to last.
</div>
<div>Key Features: </div>
</div><!--end col-md-9-->
<div class="tab-pane fade" id="2">
<div>
Stainless Steel
</div>
<div>
Aluminium Case
</div>
<div>
Fine Brushed
</div>
<div>
Steel Bracelet
</div>
<div>
Black Dial
</div>
<div>
Case Diameter 41mm
</div>
<div>
Scratch Resistant Sapphire Crystal
</div>
<div>
Automatic Movement
</div>
</div><!--end col-md-9-->
<div class="tab-pane fade" id="3">
<div class="text">
<b>Customer name</b>
<div class="pull-right">
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
</div>
</div><!--end txt class-->
<div class="text">
<b>Customer 2</b>
<div class="pull-right">
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
</div>
</div><!--end txt class-->
<div class="text">
<b>Customer 3</b>
<div class="pull-right">
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star'></i>
<i class='glyphicon glyphicon-star-empty'></i>
</div>
</div><!--end txt class-->
<br /><br />
<div class="text">
<b>Review this product</b>
<a href="/Product/WriteProductReview?productID=7398">Review this product</a>
</div>
</div>
</div>
</div><!--end main row-->
</div>
</div>
</body>
</html>
// Code goes here
$(document).ready(function() {
$('[data-spy="scroll"]').each(function() {
var $spy = $(this).scrollspy('refresh');
});
$('#target_nav').on('activate.bs.scrollspy', function(){
var activeTab = $('.nav-tabs li.active a');
activeTab.parent().removeClass('active');
activeTab.tab('show');
});
});
/* Styles go here */
#scrollable {
height: 150px;
overflow: scroll;
position: relative;
}