javascript - Retain hover over effect on link -
i have 5 links act bit of navigation bar, light blue start with, when 1 of them hovered on or clicked them change color , retain color until link selected.
i have had search solution , there many seem particular case , can't seem adapt them.
any appreciated.
heres html here, have css file making pretty well.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org /tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs({ event: "mouseover" }); }); </script> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>menu bar</title> <style type="text/css" /> </style> <link href="navpanelstyle.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="tabs"> <div id="topbar"> <ul> <li><a href="#booking">bookings</a></li> <li><a href="#rooms">rooms</a></li> <li><a href="#news">news</a></li> <li><a href="#specials">specials</a></li> <li><a href="#about_us">about us</a></li> </ul> </div> <div id="content_wrapper"> <div id="booking"> <p>bookings</p> </div> <div id="rooms"> <p>rooms</p> </div> <div id="news"> <p>news</p> </div> <div id="specials"> <p>specials</p> </div> <div id="about_us"> <p>about us</p> </div> </div> </div> </body> </html>
if can use jquery can try way, retain style selected tab.
demo
js
$("#tabs").tabs({ event: "mouseover", select: function (event, ui) { $('.active').removeclass('active'); $(ui.tab).addclass('active'); // ui.tab in select event selected tab. // stuff here } }); css
#tabs .active { color:blue; } if want apply on entire tabe can apply styles li tab element follows:-
$(ui.tab).closest('li').addclass('active');
Comments
Post a Comment