Change CSS property on click on buttons?

Question

Hy, Please can any one help me to do this task. i really need it so much.

i want to change the class style of the button (witch is a link) by clicking on it. The buttons are contained on a dynamic child div witch will change every time. the name of the dynamic child div will stay the same every time.

Note: Only one single child div will displayed in the parent div.

This is the style code:

.btn_child              {display:block;  margin:-1px; border:1px solid; background-color:#428bca; border-color:#357ebd; text-align:left; padding-left:15px;  line-height:30px; }
.btn_child:hover        {background-color:#3276b1; border-color:#285e8e; }
.btn_child_selected     {background-color:#3276b1; border-color:#285e8e; }

This is the html code:

<div id="parent" class="parent_class"> 
<!--this is a dynamic content and the ID will change. only the name will still the same-->
<div id="dynamic_child1" name="child">
<a class="btn_child" target="_blank" href="" > link1        </a>
<a class="btn_child" target="_blank" href="" > link2        </a>
<a class="btn_child" target="_blank" href="" > link3        </a>
</div>
</div>

IMPORTANT: By clicking on the next button, the old one will return to default style and the new one style will be changed.

This is a link. it may explain more: http://jsfiddle.net/c1znyrw5/

If you want to switch between the default and the new class you can use toggleClass(). — Spencer Wieczorek
– Spencer Wieczorek, Commented May 3, 2015 at 18:56
yes i already use it, but it didn't work for me. i think because the children is <a> not <div> — Houssem Chlegou
– Houssem Chlegou, Commented May 3, 2015 at 19:00
@HoussemChlegou What do you mean, there is no JS in your example? — Spencer Wieczorek
– Spencer Wieczorek, Commented May 3, 2015 at 19:01
Also note if they are supposed to go to a new page, and the new page is the page you would like to change you are going to need to use something like localStorage. Otherwise if you don't want them to go to a new page use event.preventDefault on your click event. — Spencer Wieczorek
– Spencer Wieczorek, Commented May 3, 2015 at 19:06

marc_s · Accepted Answer · 2016-04-30 07:56:17Z

2

Finally, I make it done like I want it! If anyone is interested with this thing, here is the solution:

<script><!--jquery script-->
$('.parent_class').on('click','.btn_child',function () {
$('.btn_child').removeClass('btn_child_selected');
$(this).addClass('btn_child_selected')
});
</script>

You can also check this link where it's done: http://jsfiddle.net/c1znyrw5/3/

I want to think you all for your help.

edited Apr 30, 2016 at 7:56

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 3, 2015 at 21:39

Houssem Chlegou

1491 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammed · Accepted Answer · 2015-05-03 18:59:19Z

1

$('#divid').click(function() {
    $('#div').css({
        'background-color': 'red',
        'color': 'white',
        'font-size': '44px'
    });
});

where #divid refer to button and #div refer to the div you want change the css

OR we can creat a css class and use addClass method instead of css method

$('#divid').click(function() {
        $('#div').addClass('cssclass');
    });

edited May 3, 2015 at 18:59

answered May 3, 2015 at 18:53

Muhammed

591 silver badge6 bronze badges

1 Comment

Houssem Chlegou Over a year ago

please can you give me the full result? i'm new in Js and i don't have big ideas about jquery

Decoder · Accepted Answer · 2015-05-03 19:45:47Z

1

you can use jquery .on for click event binding of the dynamically generated child and inside that event use to change the style of the respective control

$('#parent').on('click', '.btn_class', function() { 
    this.addClass("someCss");
});

edited May 3, 2015 at 19:45

answered May 3, 2015 at 18:52

Decoder

116 bronze badges

2 Comments

Houssem Chlegou Over a year ago

please can you give me the full result? i'm new in Js and i don't have big ideas about jquery

Decoder Over a year ago

corrected the code as per your need. Please change 'someCss' to the class you have.

Shariq Ansari · Accepted Answer · 2015-05-04 09:35:36Z

1

Define a class in css and on button click add that class to particular element. Assume your class name is "active". Then your code will be like this.

    $('#divid').click(function() {
    $('#div').addClass('active');
});

answered May 4, 2015 at 9:35

Shariq Ansari

4,6911 gold badge30 silver badges32 bronze badges

1 Comment

Houssem Chlegou Over a year ago

i want also to reset it again when clicked on another button. i make it done yesterday you can chek it: jsfiddle.net/c1znyrw5/3 and think you.

Collectives™ on Stack Overflow

Change CSS property on click on buttons?

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related