单击按钮更改CSS属性?

时间:2015-05-03 18:48:00

标签: javascript jquery html css

HY, 请任何人帮我完成这项任务。我真的非常需要它。

我想通过点击它来改变按钮的类风格(女巫是一个链接)。 按钮包含在一个动态的儿童div中,每次都会改变。每次动态子div的名称都保持不变。

注意:父div中只显示一个子div。

这是样式代码:

.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; }

这是html代码:

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

重要提示:点击下一个按钮,旧的按钮将返回默认样式,新的样式将被更改。

这是一个链接。它可以解释更多:http://jsfiddle.net/c1znyrw5/

4 个答案:

答案 0 :(得分:2)

最后,我按照我想要的方式完成它!如果有人对这件事感兴趣,这就是解决方案:

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

您还可以查看此链接:http://jsfiddle.net/c1znyrw5/3/

我想请大家帮忙。

答案 1 :(得分:1)

你可以使用jquery .on来动态生成孩子的click事件绑定,并在那个事件中使用来改变相应控件的样式

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

答案 2 :(得分:1)

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

其中#divid指的是按钮而#div指的是你要改变css的div

或者我们可以创建一个css类并使用addClass方法而不是css方法

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

答案 3 :(得分:1)

在css中定义一个类,然后在按钮上单击将该类添加到特定元素。假设您的班级名称是&#34;活跃&#34;。那么你的代码将是这样的。

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