CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Houssem Chlegou
Houssem Chlegou

Reputation: 149

Change CSS property on click on buttons?

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/

Upvotes: 1

Views: 5305

Answers (4)

Houssem Chlegou
Houssem Chlegou

Reputation: 149

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.

Upvotes: 2

Shariq Ansari
Shariq Ansari

Reputation: 4631

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

Upvotes: 1

Decoder
Decoder

Reputation: 11

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

Upvotes: 1

Muhammed
Muhammed

Reputation: 59

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

Upvotes: 1

Related Questions