frankwang0909.github.io/tab.html at master · frankwang0909/frankwang0909.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Tab - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="Several ways to implement Tab switching"><meta name=keywords content="Tab switch"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/tab.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/tab.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Tab"><meta property="og:description" content="Several ways to implement Tab switching"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2016-05-08T23:36:44+08:00"><meta property="article:modified_time" content="2016-05-08T23:36:44+08:00"><meta property="article:tag" content="Tab Switching"><meta itemprop=name content="Tab"><meta itemprop=description content="Several ways to implement Tab switching"><meta itemprop=datePublished content="2016-05-08T23:36:44+08:00"><meta itemprop=dateModified content="2016-05-08T23:36:44+08:00"><meta itemprop=wordCount content="467"><meta itemprop=keywords content="Tab switch"><meta name=twitter:card content="summary"><meta name=twitter:title content="Tab"><meta name=twitter:description content="Several ways to implement Tab switching"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Tab</h1><div class=post-meta><span class=post-time>2016-05-08</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>467 words </span><span class=more-meta>3 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#method-1-use-native-js-to-achieve-various-tab-switching-effects>Method 1: Use native js to achieve various tab switching effects.</a><ul><li><a href=#1-mouse-sliding-switch>1. Mouse sliding switch:</a></li><li><a href=#2-mouse-click-to-switch>2. Mouse click to switch</a></li><li><a href=#3-mouse-sliding-delay-switching>3. Mouse sliding delay switching</a></li><li><a href=#4-automatic-switching>4. Automatic switching</a></li></ul></li><li><a href=#method-2-use-jquery-to-achieve-various-tab-switching-effects-the-implementation-idea-is-the-same-as-native-javascript-except-that-jquery-encapsulates-some-methods-to-make-it-easier-to-operate-dom-elements>Method 2: Use jQuery to achieve various tab switching effects: The implementation idea is the same as native JavaScript, except that jQuery encapsulates some methods to make it easier to operate DOM elements.</a><ul><li><a href=#1-mouse-sliding-switch-1>1. Mouse sliding switch</a></li><li><a href=#2-mouse-click-to-switch-1>2. Mouse click to switch</a></li><li><a href=#3-mouse-sliding-delay-switching-1>3. Mouse sliding delay switching</a></li><li><a href=#4-automatic-switching-1>4. Automatic switching</a></li></ul></li></ul></nav></div></div><div class=post-content><p>Tab switching is a common component in web pages. Used appropriately, you can save page space and display more content on the same page. The effects of tab switching vary widely. You only need to learn the basic ideas to create various effects. Below I use native js and jQuery to achieve four different tab switching effects.</p><h2 id=method-1-use-native-js-to-achieve-various-tab-switching-effects>Method 1: Use native js to achieve various tab switching effects.</h2><h3 id=1-mouse-sliding-switch>1. Mouse sliding switch:</h3><p>This is the simplest tab switch. When the mouse rolls over, switch Tab.</p><p>First, obtain the corresponding elements through getElementById, getElementsByTagNameL and other methods.</p><p>Then, bind the mouseover event to the corresponding element.</p><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/js-mouseover-tab.html>js-mouseover-tab.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/js-mouseover-tab.html>DEMO</a></p><h3 id=2-mouse-click-to-switch>2. Mouse click to switch</h3><p>The difference from the first one is that the bound events are different. The method of obtaining elements is the same, just change the binding mouseovers event to click event.</p><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/js-click-tab.html>js-click-tab.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/js-click-tab.html>DEMO</a></p><h3 id=3-mouse-sliding-delay-switching>3. Mouse sliding delay switching</h3><p>Delay switching involves a time issue, and the delay effect can be achieved by setting a timer. Timers can be set in two ways: setTimeout() and setInterval().</p><p>The setTimeout() method is used to call a function or calculated expression after a specified number of milliseconds. setTimeout() only executes code once. If you want to call it multiple times, you need to use setInterval().</p><p>The setInterval() method calls a function or evaluates an expression at a specified period in milliseconds. The setInterval() method will continue to call the function until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as an argument to the clearInterval() method.</p><p>Because the delayed switching here is to achieve the switching effect after the specified delay time, setTimeout() is used.</p><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/js-delay-tab.html>js-delay-tab.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/js-delay-tab.html>DEMO</a></p><h3 id=4-automatic-switching>4. Automatic switching</h3><p>Automatic switching means automatically switching to the next Tab according to the specified period. A timer is also needed here, and the function is called periodically, so the setInterval() method is used to implement it.
When the mouse slides to a tab, the current page is highlighted and automatic switching is stopped. At this time, the clearInterval() method needs to be used to clear the timer.</p><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/js-auto-tab-01.html>js-auto-tab-01.html</a></p><p>The optimized code can be found at <a href=https://github.com/frankwang0909/Tab/blob/master/js-auto-tab-02.html>js-auto-tab-02.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/js-auto-tab-02.html>DEMO</a></p><h2 id=method-2-use-jquery-to-achieve-various-tab-switching-effects-the-implementation-idea-is-the-same-as-native-javascript-except-that-jquery-encapsulates-some-methods-to-make-it-easier-to-operate-dom-elements>Method 2: Use jQuery to achieve various tab switching effects: The implementation idea is the same as native JavaScript, except that jQuery encapsulates some methods to make it easier to operate DOM elements.</h2><h3 id=1-mouse-sliding-switch-1>1. Mouse sliding switch</h3><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/jQ-mouseover-tab.html>jQ-mouseover-tab.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/jQ-mouseover-tab.html>DEMO</a></p><h3 id=2-mouse-click-to-switch-1>2. Mouse click to switch</h3><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/jQ-click-tab.html>jQ-click-tab.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/jQ-click-tab.html>DEMO</a></p><h3 id=3-mouse-sliding-delay-switching-1>3. Mouse sliding delay switching</h3><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/jQ-delay-tab.html>jQ-delay-tab.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/jQ-delay-tab.html>DEMO</a></p><h3 id=4-automatic-switching-1>4. Automatic switching</h3><p>For the specific code, see <a href=https://github.com/frankwang0909/Tab/blob/master/jQ-auto-tab-01.html>jQ-auto-tab-01.html</a></p><p>The optimized code is shown in <a href=https://github.com/frankwang0909/Tab/blob/master/jQ-auto-tab-02.html>jQ-auto-tab-02.html</a></p><p><a href=http://frankwang0909.github.io/posts/demo/jQ-auto-tab-02.html>DEMO</a></p></div><footer class=post-footer><div class=post-tags><a href=/en/tags/tab-switching/>tab switching</a></div><nav class=post-nav><a class=prev href=/sublimetext-notes.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Sublimetext Intro</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/back-to-top.html><span class="next-text nav-default">Back To Top</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>&copy;
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>