Hi,
I have made a breadcrumb and handling through jquery, but facing some problem when I click on tab the active color is not getting active,
and if I am clicking the menu randomly it is not changing the below tabs.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
#crumbs {
text-align: left;
margin-left:0px;
}
#crumbs ul {
list-style: none;
display: inline-table;
margin:0;
padding:0;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
/*height: 20px;*/
background: #3498db;
text-align: center;
padding: 10px 20px 10px 40px;
position: relative;
margin: 0 5px 0 0;
font-size: 14px;
text-decoration: none;
color: #fff;
outline:0px;
}
#crumbs ul li a:after{
content: "";
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #3498db;
position: absolute; right: -20px; top: 0;
z-index: 1;
}
#crumbs ul li a:before{
content: "";
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #ffffff;
position: absolute; left: 0; top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
#crumbs ul li:last-child a {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover, #crumbs a.active {
background: #cf3046;
}
#crumbs ul li a:hover:after, #crumbs a.active:after {
border-left-color: #cf3046;
}
#crumbs .badge{background-color:#ffffff; color: #000000; text-shadow:none;}
ul#tab2 {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#tab2 li {
display: none;
}
ul#tab2 li.active {
display: block;
}
</style>
</head>
<body>
<div class="">
<div id="crumbs">
<ul >
<li>
<a style="padding-left:30px;" href="#!" class="active">
<!-- <span class="badge">1</span> -->
Select Product
</a>
</li>
<li><a href="#!">
<!-- <span class="badge">2</span> -->
Product Details
</a>
</li>
<li>
<a href="#!">
<!-- <span class="badge">3</span> -->
Technical Details</a>
</li>
<li>
<a href="#!">
<!-- <span class="badge">4</span> -->
Preview
</a>
</li>
</ul>
</div>
</div>
<br>
<br>
<div>
<ul id="tab2">
<!-- Tab 1 starts -->
<li class="active">
<div class="well">
bbc -1
</div>
</li>
<li>
<div class="well">
bbc -2
</div>
</li>
<li>
<div class="well">
bbc -3
</div>
</li>
<li>
<div class="well">
bbc -4
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#crumbs li").click(function(e){
// alert('hi');
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("crumbs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab2 li.active").removeClass("active");
$("ul#tab2 li:nth-child("+nthChild+")").addClass("active");
}
});
});
</script>
</body>
</html>