Native JS realizes various effects of Tab tab

Some time ago I wrote several articles about the understanding and usage of css attributes. Today I will not share the css attributes. I will share with you an effect that we use more in actual work-the Tab option. card effect. First, let’s take a look at what the Tab effect looks like. Taking QQ News as an example, it has the following effect:

When the mouse slides to When the relevant title is on, the content corresponding to the title will appear. This is the sliding switching effect of the Tab tab. The Tab tab effect also includes delayed switching and automatic switching. Effect. Today, let’s learn these three effects of the Tab tab with you.

2. Common codes for the three effects

The three effects are based on the following common html structure and css style:

In the html code, use two p's to contain the title and content respectively. The number of titles and the number of content need to be the same. The detailed html code and css code are as follows:

html code

<p>
  </p><p>
    </p>

      
• 公告
      
• 规则
      
• 论坛
      
• 安全
      
• 公益
    

     

    

      

        
•           张勇：要玩快乐足球         
        
•           阿里2000万驰援灾区         
        
•           旅游宝让你边玩边赚钱         
        
•           多行跟进阿里信用贷款         
      

         

      

        
•                        [             通知             ]                      “滥发”即将换新         
        
•                        [             通知             ]                      比特币严管啦         
        
•                        [             通知             ]                      禁发商品名录         
        
•                        [             通知             ]                      商品熟悉限制         
      

         

      

        
•                        [             聚焦             ]                      金牌卖家再启航         
        
•                        [             功能             ]                      橱窗规则升级啦         
        
•                        [             话题             ]                      又爱又恨优惠券         
        
•                        [             工具             ]                      购后送店铺红包         
      

         

      

        
•                        [             要闻             ]                      年轻干部要摒弃盲目求快的人生哲学         
        
•                        [             近来好             ]                      都说实体店不行了，可便利店为啥越开越多？         
        
•                        [             冬奥会             ]                      永远有杯咖啡留给您         
        
•                        [             总书记             ]                      从高空视角看习总书记的春节足迹    奋进新时代         
      

         

      

        
•           走近无声课堂         
        
•           淘宝之行大众评审赢公益         
        
•           爱心品牌联合征集         
        
•           名公益机构淘宝开店攻略         
      

       

css code

*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    box-sizing: border-box;
}
.notice{
    width: 302px;
    height: 100px;
    margin: 10px;
    border: 1px solid #eee;
    overflow: hidden;
}
.notice-title{
    height: 26px;
    background: #f7f7f7;
}

.notice-title li{
    float: left;
    width: 60px;
    line-height: 26px;
    text-align: center;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #eee;
    background: #f7f7f7;
}

.notice li a:link,
.notice li a:visited{
    text-decoration: none;
    color: #000;
}

.notice li a:hover{
    color: #f90;
}
.notice-title li.select{
    background: #fff;
    border-bottom-color: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    font-weight: bold;
}
.notice-title li:first-child.select{
    border-left: none;
}
.notice-title li:last-child.select{
    border-right: none;
}

.notice-content .mod{
    padding: 12px 5px;
}
.notice-content .mod ul{
    width: 300px;
    font-size: 0;
}
.notice-content .mod ul li{
    display: inline-block;
    width: 145px;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3. Slide Analysis of the switching effect principle

Sliding switching effect, as the name suggests, when the mouse slides over, the content under the title is displayed. It is necessary to set the style of the current title to the selected state (add the css style selected by the title, in this case, add the select style class), and at the same time set the content under the title to be displayed, that is, set the style display:block, and the content under other headings is set to be hidden, that is, the style is set to display:none. The detailed javascript code is as follows:

function $(id) {
    return typeof id==='string'? document.getElementById(id):id;
}

//获取鼠标滑过或点击的标签和要切换内容的元素
var titles = $('notice-title').getElementsByTagName('li'),
    ps = $('notice-content').getElementsByTagName('p');
if(titles.length != ps.length){
  return;
}
// 遍历titles下的所有li
for(var i = 0; i <p> If you need to achieve the effect of <strong>click switching</strong>, you only need to change <code>onmouseover</code> to <code> onclick</code> is enough. </p><p>The effect in the browser is as follows: </p><p><span class="img-wrap"><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/947a04b099e04a1fa765b4c4cc7070ad-2.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Native JS realizes various effects of Tab tab" ></span></p><p>When the mouse passes over the relevant title, the corresponding content in the title will be displayed. </p><h2 id="Analysis-of-the-principle-of-delayed-switching-effect">4. Analysis of the principle of delayed switching effect</h2><p><strong>Delayed switching effect</strong>, as the name suggests, it means that the relevant content under the title will be displayed after the mouse slides over the title for a certain period of time. It is familiar. Students of <code>javascript</code> know that we can use the <code>setTimeout</code> function to delay a certain period of time, and then modify the related titles and content to be displayed or hidden. Its <code>javascript</code> code is not much different from <strong>sliding switching effect</strong>. What we need to modify is to first determine whether the timer <code>timer</code> exists. If it exists, we need to clear the timer<code>timer</code>, otherwise there will be multiple timers, causing the switching effect to be disordered, and then put the code that modifies the title style and title content into the <code>setTimout</code> function. </p><pre class="brush:php;toolbar:false">var timer = null;

var list = $('notice-title').getElementsByTagName('li'),
    ps = $('notice-content').getElementsByTagName('p');
if(list.length != ps.length){
  return;
}
for(var i = 0; i <p>The effect in the browser is as follows: </p><p><span class="img-wrap"><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/947a04b099e04a1fa765b4c4cc7070ad-3.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Native JS realizes various effects of Tab tab" ></span></p><p>When the mouse slides over the title, there is always a certain interval of time. The title content appears later. </p><h2 id="Analysis-of-the-principle-of-automatic-switching-effect">5. Analysis of the principle of automatic switching effect</h2><p><strong>Automatic switching effect</strong>, as the name suggests, means that tabs can be automatically switched. In <code>javascript</code>, we can use <code>setInterval</code> to achieve this effect. The specific steps are as follows: </p><ol class=" list-paddingleft-2">
<li><p> By default, the first title is selected, the content under the first title is displayed, and an id is set for each title; </p></li>
<li><p> Determine whether the timer exists. If it exists, clear the timer; </p></li>
<li><p>Use the <code>setInterval</code> function to set the timer every certain time (in this example The set time is 2s) Execute the function autoPlay. In the autoPlay function, change the subscript <code>index</code> of the displayed title. If the value of the subscript <code>index</code> is greater than or equal to the number of titles, then Set the value of the displayed subscript <code>index</code> to 0; </p></li>
<li><p> Set the subscript of the title equal to the displayed subscript <code>index</code> and increase the value <code> selected</code> class, and set the subscript of the content equal to the display subscript <code>index</code> value to display (<code>display:block</code>), and modify the rest of the title content to hide (<code> display:none</code>);</p></li>
</ol><pre class="brush:php;toolbar:false">//当前高亮显示的页签索引
var index = 0;
var timer = null;
//获取所有的页签和要切换的内容
var list = $('notice-title').getElementsByTagName('li'),
    ps = $('notice-content').getElementsByTagName('p');

//遍历每一个页签并且给他们绑定事件
for(var i = 0; i = list.length) {
    index = 0;
  }
  changeOption(index);
}

function changeOption(curIndex) {
  // console.log(curIndex);
  for(var j = 0; j <p> has the following effect in the browser:</p><p><span class="img-wrap"><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/3b9682f9b668eab4890ff83825e0f869-4.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Native JS realizes various effects of Tab tab" ></span></p><p> It can be found that tabs can be automatically switched at certain intervals. </p><h2 id="Written-at-the-end">6. Written at the end</h2><p>Okay, today I will share with you the three switching effects of the Tab tab. I hope it will serve as a warm-up for everyone and help you master the principle of the Tab tab. Its sliding switching, delayed switching, and automatic switching effects are relatively easy to achieve. </p><p>Related recommendations: <br></p><p><a href="http://www.php.cn/js-tutorial-385400.html" target="_self">jQuery mobile Tab tab effect implementation method</a></p><p><a href="http://www.php.cn/js-tutorial-385201.html" target="_self">Detailed explanation of JavaScript plug-in Tab</a></p><p><a href="http://www.php.cn/js-tutorial-382851.html" target="_self">About JavaScript plug-in Tab effect sharing</a></p><p class="comments-box-content"><br></p>

The above is the detailed content of Native JS realizes various effects of Tab tab. For more information, please follow other related articles on the PHP Chinese website!