Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery
Hi, I have a arrow bread crumb css, which look as expected.But on click of particular menu it's
color should be change.But in my case jquery doesn't change border-left-color property.
 
I have follow css,
 
.breadcrumb li:nth-child(2) a {
background:green;
}
 
.breadcrumb li:nth-child(2) a:after {
border-left-color:green;
}
 
And my Jquery code is,
 
$("#CONFIGURE_POLICY_li").click(function () {
              $(".breadcrumb li:nth-child(2) a").removeAttr('background').css('background','none repeat scroll 0 0 red');/*It works fine.*/
              $(".breadcrumb li:nth-child(2) a:after").removeAttr('border-left-color').css('border-left-color','red');/*while it is not.*/
 
          });
Posted 18-Apr-13 1:05am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I don't understand why you need to use :after but if you just want to change border and background-color you could just do this way
 
first you need to specify the border
 
.breadcrumb li:nth-child(2) a {
  background:green;
  border-left:"3px solid green";
}
 
and so, in your click event
 

$("#CONFIGURE_POLICY_li").click(function () {
    //You don't need to use removeAttr since it only works to element attributes and not to css attributes
    $(".breadcrumb li:nth-child(2) a").css({background:"none repeat scroll 0 0 red", borderLeftColor:"blue"});
});
 
hope it helps, if don't, please let me know.
 
EDIT --------------------------------------------------------------------------------------
 
Ok, now i understood what is your problem. It's because you are using :after what do not create an "element" in the DOM(so it don't have a style attribute), but just draw something after the specified element,.
 
so what you could do is add a css rule to your style
 
.breadcrumb li:nth-child(2) a.special { background:green }
.breadcrumb li:nth-child(2) a.special:after { border-left-color:green; } 
 
and so in you javascript you could do
 
$("#CONFIGURE_POLICY_li").click(function () {
    $(".breadcrumb li:nth-child(2) a").addClass("special");
  });
  Permalink  
v3
Comments
Brian A Stephens at 18-Apr-13 9:15am
   
Shouldn't that be "border-left-color" instead of "borderLeftColor" in the css() call?
Moykn at 18-Apr-13 9:20am
   
nope, when you pass a object to jQuery.css instead of using dash(-) you should use cammel case because dashed names are not valid variables name.
vaibhav10Dec1987 at 19-Apr-13 5:50am
   
Hi, I tried your code but in that case jquery unable to change borderLeftColor Property.Even
 
.breadcrumb li:nth-child(2) a {
background:green;
border-left:"3px solid green";
}
 
border-left is not applied to the breadcrumbs arrow.
Moykn at 19-Apr-13 7:36am
   
Can you show a bit part of your html?
vaibhav10Dec1987 at 19-Apr-13 7:43am
   
<ul class="breadcrumb">
<li id="SelectServiceTab"> Step 1
<div class="div_Wizard_step">
<div style="text-align: center;">1</div>
</div>
</li>
<li id="ConfigurePolicyTab">Step 2
<div class="div_Wizard_step">
<div style="text-align: center;">2</div>
</div>
</li>
<li id="InstallOptionTab">Step 3
<div class="div_Wizard_step">
<div style="text-align: center;">3</div>
</div>
</li>
<li></li>
</ul>
 
My Css is,
 
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
 
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background:#2F87DD;
position: relative;
display: block;
float: left;
}
 
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;

border-left: 30px solid #2F87DD;/*#2F87DD*/
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
 
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left:5px;/*1px; vaibhav*/
left: 100%;
z-index: 1;
}
 
.breadcrumb li:nth-child(2) a {
background:#4D4D4D;
border-left:3px solid green !important;
}
 
.breadcrumb li:nth-child(2) a:after {
border-left-color:#4D4D4D;
}
 

.breadcrumb li:nth-child(3) a {
background:#4D4D4D;

}
.breadcrumb li:nth-child(3) a:after {
border-left-color:#4D4D4D;
}
 
.breadcrumb li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li a {
height:40px;
width:268px;
 
}
.breadcrumb li a:hover { background: #2F87DD; }
.breadcrumb li a:hover:after { border-left-color: #2F87DD ; }

 
.div_Wizard_step {
background: none repeat scroll 0 0 transparent;
border: 4px solid #FEFEFE;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px; /* opera */
border-radius: 20px;
color: WHITE;
float: right;
font-size: 20px;
font-weight: bold;
height: 25px;
width: 25px;
padding:3px;

 
}
 
& My Jquery is,
 
$("#ConfigurePolicyTab").click(function () {
 
$(".breadcrumb li:nth-child(2) a").css({ background: "none repeat scroll 0 0 red" });
$(".breadcrumb li:nth-child(2) a:after").css("border-Left-Color", "red");
}
Moykn at 19-Apr-13 8:05am
   
I have updated my answer to address your problem.
vaibhav10Dec1987 at 19-Apr-13 9:00am
   
Hi, Moykn Thank you for your wonderful help.It works.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 19 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100