Simple Jquery Plugin
Monday, 13 July 2015
jQuery Traversing next
Create index.html
<html> <head> <title>jQuery Traversing next</title> <script src="http://code.jquery.com/jquery-2.1.1.js"></script> <style> .roqw { background: #333 none repeat scroll 0 0; border: 4px solid #ccc; float: left; height: 200px; margin: 10px; padding: 3px; width: 176px; } h4 { text-align:center; color:#00CC99; margin:0px; } .mytclick { background: #000000; border: 3px solid #00e000; box-shadow: 2px 2px 3px 1px #333; color: #fff; cursor: pointer; height: 6px; line-height: 5px; margin: auto; padding: 20px; text-align: center; width: 100px; } .mytclick:hover { background: #0099FF; } .mysend { background: #cc6600; color: #fff; cursor: pointer; margin-top: 21px; padding: 6px; text-align: center; } </style> </head> <body> <div class="mytclick">Click</div> <div class="roqw" id="start"> <h4>User Form</h4> <form action="mail.php" id="mail"> <label>Name</label> <input type="text"> <label>Email</label> <input type="text"> <label>Phone No.</label> <input type="text"> <div class="mysend"> SEND</div> </form> </div> <div class="roqw"> <h4>Admin Form</h4> <form action="mail.php" id="mail"> <label>Name</label> <input type="text"> <label>Email</label> <input type="text"> <label>Phone No.</label> <input type="text"> <div class="mysend"> SEND</div> </form> </div> <div class="roqw"> <h4>Client Form</h4> <form action="mail.php" id="mail"> <label>Name</label> <input type="text"> <label>Email</label> <input type="text"> <label>Phone No.</label> <input type="text"> <div class="mysend"> SEND</div> </form> </div> <div class="roqw"> <h4>Feedback Form</h4> <form action="mail.php" id="mail"> <label>Name</label> <input type="text"> <label>Email</label> <input type="text"> <label>Phone No.</label> <input type="text"> <div class="mysend"> SEND</div> </form> </div> <div class="roqw"> <h4>Contact Form</h4> <form action="mail.php" id="mail"> <label>Name</label> <input type="text"> <label>Email</label> <input type="text"> <label>Phone No.</label> <input type="text"> <div class="mysend"> SEND</div> </form> </div> <div class="roqw"> <h4>Help Form</h4> <form action="mail.php" id="mail"> <label>Name</label> <input type="text"> <label>Email</label> <input type="text"> <label>Phone No.</label> <input type="text"> <div class="mysend"> SEND</div> </form> </div> <script> var $currDiv = $( "#start" ); $currDiv .css( "background", "#0099FF" ); $( ".mytclick" ).click(function() { $currDiv = $currDiv .next(); $( ".roqw" ).css( "background", "" ); $currDiv .css( "background", "#0099FF" ); }); </script> </body> </html>
No comments:
Post a Comment
Newer Post
Older Post
Home
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment