Sample code sharing to implement switching delay when the js mouse passes through the tab tab-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Sample code sharing to implement switching delay when the js mouse passes through the tab tab

Mar 25, 2017 pm 02:43 PM

js Tab

This article mainly introduces in detailjsThe switching delay effect is achieved when the mouse passes through the tab tab. It has a certain reference value. Interested friends can refer to it

I accidentally discovered this effect while browsing the web. When the mouse slides over the tab inadvertently, it will not switch. It will switch when the mouse stays on it for a while.

Personally, I think the user experience is good. The advantages are: 1. When the user just slides over the tab, there is no need to switch. At this time, if switching tabs requires requesting data, unnecessary asynchronous requests will be avoided; 2. Avoid The page switches and jumps when the user does not need it, affecting the user experience.

I checked several methods online and found that the following method is more concise and effective. Organized for future reference.

The key point is the js code: the principle is to set the timer when passing through hover, delay the execution of the switching method, and clear the timer when leaving. When the hover time is less than the delay time, the timer will be cleared and the switching method will not be executed. Switching will only occur when the dwell time is greater than the delay time. This can effectively avoid sliding the tab to trigger the switch event .

Copy code

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.1.11.3.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      $(function() {
        var t_li = $(&quot;.tab&quot;)
        var c_li = $(&quot;.tab-content p&quot;)
        t_li.hover(function() {
          var i = t_li.index($(this));

          function way() {
            t_li.removeClass(&quot;cur&quot;).eq(i).addClass(&quot;cur&quot;);
            c_li.hide().eq(i).show();
          }
          timer = setTimeout(way, 500);
        }, function() {
          clearTimeout(timer);
        });
      });
    &lt;/script&gt;
    &lt;style&gt;
      .head {
        width: 300px;
        height: 50px;
        border: 1px dashed #ccc;
      }
      
      .tab {
        width: 50%;
        float: left;
        line-height: 50px;
        cursor: pointer;
      }
      
      .cur {
        border-bottom: 2px solid red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p style=&quot;width: 300px;margin-left: 300px;&quot; class=&quot;main&quot;&gt;
      &lt;p class=&quot;head&quot;&gt;
        &lt;p class=&quot;tab cur&quot;&gt;tab1&lt;/p&gt;
        &lt;p class=&quot;tab&quot;&gt;tab2&lt;/p&gt;
      &lt;/p&gt;
      &lt;p class=&quot;tab-content&quot;&gt;
        &lt;p&gt;tab1的内容&lt;br&gt;tab1的内容&lt;br&gt;tab1的内容&lt;br&gt;&lt;/p&gt;
        &lt;p style=&quot;display: none;&quot;&gt;tab2的内容&lt;br&gt;tab2的内容&lt;br&gt;tab2的内容&lt;br&gt;&lt;/p&gt;
      &lt;/p&gt;
    &lt;/p&gt;
  &lt;/body&gt;

&lt;/html&gt;

Copy after login

The above is the detailed content of Sample code sharing to implement switching delay when the js mouse passes through the tab tab. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn