jquery - how to link javascript and html -
i have created simple program on simple html file. wish find out how link javascript html , css. here follows example code:
(index.html)
<head> <title>javascript</title> <link rel="stylesheet" href="stylesheet.css"/> </head> <body> <div class="picture"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:and9gcrzab6kczrntbm1uflimaqfagutkn0xwyfsitgm5m5nrwxo_udt"/> </div> <button class="show_btn">show</button> <button class="hide_btn">hide</button> <script src="script.js"></script> </body>
js:
$(document).ready(function(){ $(".hide_btn").click(function(){ $("p").slideup(); }); $(".show_btn").click(function(){ $("p").slidedown(); }); });
css:
.picture { display: none; }
now code, attempting use 2 buttons show , hide picture of fish...i can't seem work however, , believe has how linking files. please help!
based off of comment in question appear using jquery not have jquery part of source code.
you need include jquery source above script.js.
here example of how should using google cdn jquery library:
<head> <title>javascript</title> <link rel="stylesheet" href="stylesheet.css"/> </head> <body> <div class="picture"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:and9gcrzab6kczrntbm1uflimaqfagutkn0xwyfsitgm5m5nrwxo_udt"/> </div> <button class="show_btn">show</button> <button class="hide_btn">hide</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="script.js"></script> </body>
Comments
Post a Comment