单击按钮更改CSS属性？答案

【问题标题】：Change CSS property on click on buttons?单击按钮更改CSS属性？
【发布时间】：2023-03-13 12:35:01
【问题描述】：

嘿，请任何人都可以帮助我完成这项任务。我真的很需要它。

我想通过单击来更改按钮的类样式（女巫是一个链接）。按钮包含在一个动态的子 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/

【问题讨论】：

你还没有添加任何javascript？
如果你想在默认类和新类之间切换你可以使用toggleClass()。
是的，我已经在使用它，但它对我不起作用。我认为因为孩子是而不是
@HoussemChlegou 什么意思，你的例子中没有JS？
还要注意他们是否应该转到新页面，并且新页面是您要更改的页面，您将需要使用localStorage 之类的内容。否则，如果您不希望他们转到新页面，请在您的 click 事件中使用 event.preventDefault。

标签： javascript jquery html css

【解决方案1】：

最后，我按照我的意愿完成了！如果有人对这个东西感兴趣，这里是解决方案：

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

我想请大家帮忙。

【讨论】：

【解决方案2】：

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

【讨论】：

请问你能给我完整的结果吗？我是 Js 新手，对 jquery 没有什么大想法

【解决方案3】：

您可以使用 jquery .on 来绑定动态生成的子项的点击事件，并在该事件中使用来更改相应控件的样式

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

【讨论】：

请问你能给我完整的结果吗？我是 Js 新手，对 jquery 没有什么大想法
根据您的需要更正了代码。请将“someCss”更改为您的课程。

【解决方案4】：

在 css 中定义一个类，然后单击按钮将该类添加到特定元素。假设您的班级名称是“活动的”。那么你的代码会是这样的。

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

【讨论】：

我还想在单击另一个按钮时再次重置它。我昨天做的，你可以看看：jsfiddle.net/c1znyrw5/3 想想你。