پاسخ : سوال درمورد jqyery
سلام با jquery و css3 میشه همچین چیزی ساخت من خیلی سریع کد زدم خودتون وقت بگذارید چیزه قشنگی میتونید دربیارید .
کد:<html> <head> <title>Chrome</title> <style> .page { width: 800px; margin: 40px auto; height: 300px; font-family: 'Segoe UI'; text-align: center; } a { text-decoration: none; color: #333; display: inline-block; line-height: 40px; } li { line-height: 40px; width: 130px; list-style: none; display: inline-block; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; -webkit-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; } li:hover { border-bottom: 3px solid #3d92fa; } li.s a { border-bottom: 3px solid #3d92fa; } ul { border-bottom: 1px solid #ccc; margin: 100px auto; padding: 0; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function () { $index = getIndex(); $("li").hover(function () { $("li").each(function () { $(this).removeClass('s'); }); } , function () { $("li").each(function () { if ($(this).index() == $index) $(this).addClass('s'); }); } ); function getIndex() { return $("li.s").index() } }); </script> </head> <body> <div class="page"> <ul> <li class="s"> <a href="#">BROWSER</a> </li> <li> <a href="#">DEVICES</a> </li> <li> <a href="#">WEB STORE</a> </li> </ul> </div> </body> </html>
پاسخ با نقل قول