Manual hover function in javascript -
i not know wrong, hover function wrote here stays when not hovering button. know there simpler way hover object, learning basics, helpful wrong exact code have.
<head> <style> .tabstrip { background-color: #e4e2d5; padding: 15px; height: 22px; width: 130px; margin: auto; } .tabstrip div { float: left; font: 14px arial; cursor: pointer; } .tabstrip-tab { padding: 5px; } .tabstrip-tab-hover { border: 1px solid #316ac5; background-color: #c1d2ee; padding: 4px; } .tabstrip-tab-click { border: 1px solid #facc5a; background-color: #f9e391; padding: 4px; } </style> </head> <body> <div class="tabstrip"> <div data-tab-number="1" class="tabstrip-tab">tab1</div> <div data-tab-number="2" class="tabstrip-tab">tab2</div> <div data-tab-number="3" class="tabstrip-tab">tab3</div> </div> <div id="desccontainer"></div> <script> function handleevent(e) { var target = e.target; switch (e.type) { case 'mouseover': if (target.classname == 'tabstrip-tab') { target.classname = 'tabstrip-tab-hover'; } break; case 'mouseout': if (targer.classname == 'tabstrip-tab-hover') { targer.classname = 'tabstrip-tab'; } break; case 'click': if (target.classname == 'tabstrip-tab-hover') { target.classname = 'tabstrip-tab-click'; var num = target.getattribute('data-tab-number'); showdescription(num); } break; } } function showdescription(num) { var desccontainer = document.getelementbyid('desccontainer') var text = 'description tab ' + num; desccontainer.innerhtml = text; } document.addeventlistener('mouseover', handleevent); document.addeventlistener('mouseout', handleevent); document.addeventlistener('click', handleevent); </script> </body>
the problem seems misspelled target targer in javascript
correct:
function handleevent(e) { var target = e.target; switch (e.type) { case 'mouseover': if (target.classname == 'tabstrip-tab') { target.classname = 'tabstrip-tab-hover'; } break; case 'mouseout': if (target.classname == 'tabstrip-tab-hover') { target.classname = 'tabstrip-tab'; } break; case 'click': if (target.classname == 'tabstrip-tab-hover') { target.classname = 'tabstrip-tab-click'; var num = target.getattribute('data-tab-number'); showdescription(num); } break; } } 
Comments
Post a Comment