On click breadrumb active color is not changing

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>

You have the active class on the anchor in the first list but your js is targetting the list.

you need this:

$("#crumbs li a.active").removeClass("active");
 $(this).find('a').addClass("active");

Instead of this:

  $("crumbs li.active").removeClass("active");
   $(this).addClass("active");

You also missed the # from crumbs.

thanks paul,
its working now…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.