Response title
This is preview!
tabs - click and mouseenter, mouseleave
in Getting Started
•
8 years ago
I have had problem with using tabs. I tried to implement tabs functionality for example as site http://mashable.com.
Tabs can be hover and show tab content by hover. If I click tab, tab content should be hidden, unvisible UNTIL mouseleave <li>. If I again mouseenter, tab content will be shown.
I have had problem with combine hover and click. With this code, I have problems like:
1. Page load
- if tabs up and down during page load, tab content is shown because of mouseenter despite of click tab
2. Click tab <li>
- clicking tab sometimes tab content is shown, sometimes not - there is no rule; must be not shown
- if tab content is not shown, if I move mouse (I did not mouseleave <li>), somethimes tab content is shown, sometimes not
HTML:
<div id="tabs"> <ul id="tabstest"> <li id="tab1" class="tab" onclick="location.href='\ttest1.php';" style="cursor:pointer;"><strong>Test 1</strong></li> <li id="tab2" class="tab" <a href="/Test/test2.php" class="tab_link" ><strong><br>Test 2</strong></a></li> <li id="tab3" class="tab" <a href="/Test/test3.php" class="tab_link" ><strong>Test 3</strong></a></li> <li id="tab4" class="tab" onclick="location.href='\ttest4.php'; " style="cursor:pointer;" ><strong><br>Test 4</strong></li> <li id="tab5" class="tab" <a href="/Test/test5.php" class="tab_link" ><strong><br>Test 5</strong></a></li> <li id="tab6" class="tab" <a href="/Test/test6.php" class="tab_link" ><strong><br>Test 6</strong></a></li> </ul> </div> <div id="tabcontents"> <div id="tab1content" class="tabcontent"> <p>tab1 content</p> </div> <div id="tab2content" class="tabcontent"> <p>tab2 content</p> </div> <div id="tab3content" class="tabcontent"> <p>tab3 content</p> </div> <div id="tab4content" class="tabcontent"> <p>tab4 content</p> </div> <div id="tab5content" class="tabcontent"> <p>tab5 content</p> </div> <div id="tab6content" class="tabcontent"> <p>tab6 content</p> </div> </div>
| I have had problem with using tabs. I tried to implement tabs functionality for example as site http://mashable.com. Tabs can be hover and show tab content by hover. If I click tab, tab content should be hidden, unvisible UNTIL mouseleave I have had problem with combine hover and click. With this code, I have problems like: HTML: JQuery: |
$(window).load(function(){ $(".tab").focus(function() { var tabId = $(this).attr('id'); $("#" + tabId + "content").hide(); }); $(".tabcontent").focus(function() { $(this).hide(); }); $(".tab").click(function() { var tabId = $(this).attr('id'); $("#" + tabId + "content").hide(); }); $(".tabcontent").click(function() { $(this).hide(); }); $(".tab").mouseenter(function() { var tabId = $(this).attr('id'); $("#" + tabId + "content").show(); }); $(".tabcontent").mouseenter(function() { $(this).show(); }); $(".tab").mouseleave(function() { var tabId = $(this).attr('id'); $("#" + tabId + "content").hide(); }); $(".tabcontent").mouseleave(function() { $(this).hide(); }); });
1