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: /

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/c1znyrw5/

• javascript
• jquery
• html
• css

• You haven't added any javascript at all? – Emil Ingerslev Commented May 3, 2015 at 18:52
• If you want to switch between the default and the new class you can use toggleClass(). – 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 Commented May 3, 2015 at 19:00
• @HoussemChlegou What do you mean, there is no JS in your example? – 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 Commented May 3, 2015 at 19:06

4 Answers 4

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/c1znyrw5/3/

I want to think you all for your help.

$('#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');
    });

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");
});

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');
});