Houssem Chlegou Houssem Chlegou - 2 years ago 86
Javascript Question

Change CSS property on click on buttons?

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>

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/

Answer Source

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 () {

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

I want to think you all for your help.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download