html - How change the color of text when clicking a button using jquery? -
i'm trying change color of button when it's clicked.so wrote program.
$(document).ready(function() { var myprojects_button = document.getelementbyid("myprojects_button"); $(myprojects_button).click(function() { $("myprojects_text").css("color: #cd1692"); }); });
.myprojects_div { display: flex; flex-direction: column; } .myprojects_text { display: inline-block; font-size: 16px; font-family: "arial round mt bold"; color: #ffffff; line-height: 1.2; padding-top: 0px; margin-left: 10px; z-index: 2; } .fa.fa-list-alt { color: #ffffff; } .btn.btn-primary.btn-lg { background-color: #1b191a; border: #1b191a; height: 49px; } .btn.btn-primary.btn-lg:hover, .btn.btn-primary.btn-lg:focus, .btn.btn-primary.btn-lg:active { box-shadow: none; color: #8e8e8e; cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myprojects_div" class="myprojects_div"> <button id="myprojects_button" type="button" class="btn btn-primary btn-lg" data-target="#"> <i class="fa fa-list-alt" aria-hidden="true"></i> <p class="myprojects_text">my projects<p> </button> </div>
but when clicked on button, color doesn't change. how can fix this?
the correct usage of .css() described here change javascript part this:
$(document).ready(function() { $("#myprojects_button").click(function() { $(".myprojects_text").css("color","#cd1692"); }); });
Comments
Post a Comment