html5 - How to keep focus in css -
i have page header tag include 4 buttons home about.. using focus managed have changes in properties border after click 1 of them, want button remain clicked after click other element not in navigation list, create home example, selected default, (look @ .nav a:first-child), problem came when tried remove changes give focus others. solution such problem?. here css , related markup:
css
.nav{ width: 1200px; display: block; margin: 20px auto 0 auto; min-height:50px; max-height:50px; background: royalblue; border: 2px solid royalblue; border-radius: 10px; } .nav a{ text-decoration: none; color: white; border: 1px solid black; border-radius: 5px; padding-left: 5px; padding-right: 5px; line-height: 45px; } .nav a:first-child{ border: 2px solid black; border-radius: 10px; } .nav a:focus{ border: 2px solid black; border-radius: 10px; } html5
<!doctype html> <html> <head> <title>yourwords</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="css/prostyle.css" rel="stylesheet"> </head> <body> <header class="nav"> <a href="#" >home</a> <a href="#">best</a> <a href="#">authors</a> <a href="#">about</a> </header> <div class="wrap"> ... </div> <footer class="footer"> ... </footer> <script src="js/principal.js"></script> </body> </html>
give nav items id's create life easier. using jquery
var $lastclicked; jquery(document).ready(function($) { $(".nav a").each(function() { $(this).click({param: this.id}, setlastclicked); }); }); function setfocus(event) { event.preventdefault(); $lastclicked = event.data.param; } $(".wrap").click(function() { $lastclicked.focus(); }); html5 css3
No comments:
Post a Comment