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)

  Print Answers RSS
0 OriginalGriff 475
1 Maciej Los 349
2 Richard MacCutchan 220
3 BillWoodruff 219
4 Mathew Soji 160
0 OriginalGriff 8,759
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,639
3 Maciej Los 5,269
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web02 | 2.8.1411028.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