javascript - 单击按钮更改 CSS 属性?

标签 javascript jquery html css

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

我想通过点击它来改变按钮的类样式(女巫是一个链接)。 这些按钮包含在一个动态的子 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/

最佳答案

终于如愿以偿了!如果有人对此感兴趣,这里是解决方案:

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

我想请大家帮忙。

关于javascript - 单击按钮更改 CSS 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30017945/

相关文章:

html - Google Chrome 与 Firefox 中的字体显示完全不匹配

javascript - 如何实现按钮而不是单选按钮

javascript - 在 JavaScript 和 AS3 中生成真正唯一的 UUID - PRNG 和底层算法

javascript - 如何有条件地将选定的行从表A复制到表B?

javascript - 动态更改 Bootstrap 工具提示位置

javascript - Webpack 从嵌套的依赖项中导入不需要的模块

javascript - UIWebview 中的自动凭据输入 - iOS

javascript - Ajax调用完成后执行函数

javascript - 将一个 div 放置在滑动的 Jquery div 之上

html - text-align 在 flexbox 中不起作用