jquery - altering <a> tag for JavaScript -
how utilize javascript move active link state link?
please see codepen:
http://codepen.io/krish1980/pen/mgfed
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script type="text/javascript"> $(function(){ $('#nav a').on('click',function(){ $('#nav li').removeclass('active'); $(this).parent().addclass('active'); }); }); </script>
//wrap click handler in documentready handler //attached after elements have been loaded dom $(document).ready(function() { //attach click handler <li> elements under //the element id "nav" $("#nav li").click(function() { //whenever 1 of <li> elements clicked, remove //"active" class element has it. $(".active").removeclass("active"); //add "active" class element triggered function //(the <li> clicked) $(this).addclass("active"); }); }); if copy , paste code .html file , open browser, see work way want to:
<html> <head> <style> body{background:#f9d867; margin:0; padding:0;} #nav{display:block; background:#f5f5f5; -moz-box-shadow: 0 0 4px 0px #999; -webkit-box-shadow: 0 0 4px 0px #999; box-shadow: 0 0 4px 0px #999; margin:0; padding:40px 20px; list-style:none; text-align:center; } #nav li{display:inline-block;} #nav li a{display:block; padding:10px 15px; font:1em "arial black", gadget, sans-serif; color:#444; text-decoration:none; text-transform:uppercase;} #nav li a:hover{color:#999;} #nav li.active a{background:#fff; -moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1); box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function() { $("#nav li").click(function() { $(".active").removeclass("active"); $(this).addclass("active"); }); }); </script> </head> <body> <ul id="nav"> <li> <a href="#">art</a> </li> <li> <a href="#">archive</a> </li> <li> <a href="#">about</a> </li> <li> <a href="#">blog</a> </li> <li class="active"> <a href="#">contact</a> </li> </ul> </body> </html>
Comments
Post a Comment