node.js - Implementation of script using javascript -
i'm want add effects when clik button using jquery.i wrote code on file named script1.js:(authentication/views/javascript/script1)
$(document).ready(function() { $( ".button" ).mouseenter(function() { $(this).addclass("active"); }); $(".button").mouseleave(function() { $(this).removeclass("active"); }) });
when call script in signin.ejs using :(authentication/views)
<script src="jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script> <script type="text/javascript" src="javascript/script1.js"></script>
the button still fixed , no effect shown. style.css:(authentication/views/style)
.active { background-color:#556677; } .button { background-color:#8cc6d7; border:1px solid #5eb6dd; border-radius: 5px; width:100px; height:40px; margin-left:auto; margin-right:auto; font-family:arial; font-size:15px; }
then added folder named jquery (authentication/views/jquery/jquery-ui-1.11.4) on app.js(authentication/app.js(nodejs)),i added these lines:
app.use(express.static(__dirname +'/views/style')); app.use(express.static(__dirname +'/views/javascript')); app.use(express.static(__dirname +'/views/jquery/jquery-ui-1.11.4'));
it working:
if button
tag
$(document).ready(function() { $("button").mouseenter(function() { $(this).addclass("active"); }) $("button").mouseleave(function() { $(this).removeclass("active"); }) });
.active { background-color: #556677; } button { background-color: #8cc6d7; border: 1px solid #5eb6dd; border-radius: 5px; width: 100px; height: 40px; margin-left: auto; margin-right: auto; font-family: arial; font-size: 15px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>click me</button>
else
if button class, keep active class after button in css jquery $(".button")
:
$(document).ready(function() { $(".button").mouseenter(function() { $(this).addclass("active"); }) $(".button").mouseleave(function() { $(this).removeclass("active"); }) });
.button { background-color: #8cc6d7; border: 1px solid #5eb6dd; border-radius: 5px; width: 100px; height: 40px; margin-left: auto; margin-right: auto; font-family: arial; font-size: 15px; } .active { background-color: #556677; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="button" value="click me"></input>
Comments
Post a Comment