How to change breadcrumb arrow css on click event in javascript?

Question

0.00/5 (No votes)

See more:

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,

C#

$("#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 0:05am

vaibhav10Dec1987

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Moykn · Accepted Answer · 2013-04-18T02:45:00

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

CSS

.breadcrumb li:nth-child(2) a {
  background:green;
  border-left:"3px solid green";
}

and so, in your click event

JavaScript

$("#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

CSS

.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

JavaScript

$("#CONFIGURE_POLICY_li").click(function () {
    $(".breadcrumb li:nth-child(2) a").addClass("special");
  });

Posted 18-Apr-13 2:45am

Moykn

Updated 19-Apr-13 2:23am

v3

Comments

Brian A Stephens 18-Apr-13 9:15am

Shouldn't that be "border-left-color" instead of "borderLeftColor" in the css() call?

Moykn 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 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 19-Apr-13 7:36am

Can you show a bit part of your html?

vaibhav10Dec1987 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 19-Apr-13 8:05am

I have updated my answer to address your problem.

vaibhav10Dec1987 19-Apr-13 9:00am

Hi, Moykn Thank you for your wonderful help.It works.