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 id="notice" class="notice">
  <p id="notice-title" class="notice-title">
    <ul>
      <li class="select"><a href="#">公告</a></li>
      <li><a href="#">规则</a></li>
      <li><a href="#">论坛</a></li>
      <li><a href="#">安全</a></li>
      <li><a href="#">公益</a></li>
    </ul>
  </p>
  <p id="notice-content" class="notice-content">
    <p class="mod" style="display: block">
      <ul>
        <li>
          <a href="#">张勇：要玩快乐足球</a>
        </li>
        <li>
          <a href="#">阿里2000万驰援灾区</a>
        </li>
        <li>
          <a href="#">旅游宝让你边玩边赚钱</a>
        </li>
        <li>
          <a href="#">多行跟进阿里信用贷款</a>
        </li>
      </ul>
    </p>
    <p class="mod" style="display: none">
      <ul>
        <li>
          <span>
            [
            <a href="">通知</a>
            ]
          </span>
          <a href="#">“滥发”即将换新</a>
        </li>
        <li>
          <span>
            [
            <a href="">通知</a>
            ]
          </span>
          <a href="#">比特币严管啦</a>
        </li>
        <li>
          <span>
            [
            <a href="">通知</a>
            ]
          </span>
          <a href="#">禁发商品名录</a>
        </li>
        <li>
          <span>
            [
            <a href="">通知</a>
            ]
          </span>
          <a href="#">商品熟悉限制</a>
        </li>
      </ul>
    </p>
    <p class="mod" style="display: none">
      <ul>
        <li>
          <span>
            [
            <a href="">聚焦</a>
            ]
          </span>
          <a href="#">金牌卖家再启航</a>
        </li>
        <li>
          <span>
            [
            <a href="">功能</a>
            ]
          </span>
          <a href="#">橱窗规则升级啦</a>
        </li>
        <li>
          <span>
            [
            <a href="">话题</a>
            ]
          </span>
          <a href="#">又爱又恨优惠券</a>
        </li>
        <li>
          <span>
            [
            <a href="">工具</a>
            ]
          </span>
          <a href="#">购后送店铺红包</a>
        </li>
      </ul>
    </p>
    <p class="mod" style="display: none">
      <ul>
        <li>
          <span>
            [
            <a href="">要闻</a>
            ]
          </span>
          <a href="#">年轻干部要摒弃盲目求快的人生哲学</a>
        </li>
        <li>
          <span>
            [
            <a href="">近来好</a>
            ]
          </span>
          <a href="#">都说实体店不行了，可便利店为啥越开越多？</a>
        </li>
        <li>
          <span>
            [
            <a href="">冬奥会</a>
            ]
          </span>
          <a href="#">永远有杯咖啡留给您</a>
        </li>
        <li>
          <span>
            [
            <a href="">总书记</a>
            ]
          </span>
          <a href="#">从高空视角看习总书记的春节足迹    奋进新时代</a>
        </li>
      </ul>
    </p>
    <p class="mod" style="display: none">
      <ul>
        <li>
          <a href="#">走近无声课堂</a>
        </li>
        <li>
          <a href="#">淘宝之行大众评审赢公益</a>
        </li>
        <li>
          <a href="#">爱心品牌联合征集</a>
        </li>
        <li>
          <a href="#">名公益机构淘宝开店攻略</a>
        </li>
      </ul>
    </p>
  </p>
</p>

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 < titles.length; i++) {
  // 添加索引
  titles[i].id = i;
  titles[i].onmouseover = function () {
    //清除所有title上的class，将所有的p设置为隐藏
    for(var j=0; j<titles.length; j++) {
      titles[j].className = &#39;&#39;;
      ps[j].style.display = &#39;none&#39;;
    }
    //设置当前li为高亮显示
    this.className = &#39;select&#39;;
    ps[this.id].style.display = &#39;block&#39;;
  }
}

If you need to achieve the effect of click switching, you only need to change onmouseover to onclick is enough.

The effect in the browser is as follows:

When the mouse passes over the relevant title, the corresponding content in the title will be displayed.

4. Analysis of the principle of delayed switching effect

Delayed switching effect, 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 javascript know that we can use the setTimeout function to delay a certain period of time, and then modify the related titles and content to be displayed or hidden. Its javascript code is not much different from sliding switching effect. What we need to modify is to first determine whether the timer timer exists. If it exists, we need to clear the timertimer, 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 setTimout function.

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 < list.length; i++) {
  list[i].id = i;
  list[i].onmouseover = function () {
    var self = this;
    //如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
    if(timer) {
      clearTimeout(timer);
      timer = null;
    }
    //延迟半秒执行
    timer = setTimeout(function () {
      for(var j = 0; j < list.length; j++) {
        list[j].className = &#39;&#39;;
        ps[j].style.display = &#39;none&#39;;
      }
      list[self.id].className = &#39;select&#39;;
      ps[self.id].style.display = &#39;block&#39;;
    }, 500)
  }
}

The effect in the browser is as follows:

When the mouse slides over the title, there is always a certain interval of time. The title content appears later.

5. Analysis of the principle of automatic switching effect

Automatic switching effect, as the name suggests, means that tabs can be automatically switched. In javascript, we can use setInterval to achieve this effect. The specific steps are as follows:

1. By default, the first title is selected, the content under the first title is displayed, and an id is set for each title;

2. Determine whether the timer exists. If it exists, clear the timer;

3. Use the setInterval 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 index of the displayed title. If the value of the subscript index is greater than or equal to the number of titles, then Set the value of the displayed subscript index to 0;

4. Set the subscript of the title equal to the displayed subscript index and increase the value selected class, and set the subscript of the content equal to the display subscript index value to display (display:block), and modify the rest of the title content to hide ( display:none);

//当前高亮显示的页签索引
var index = 0;
var timer = null;
//获取所有的页签和要切换的内容
var list = $('notice-title').getElementsByTagName('li'),
    ps = $('notice-content').getElementsByTagName('p');

//遍历每一个页签并且给他们绑定事件
for(var i = 0; i < list.length; i++) {
  list[i].id = i;
}
//添加定时器前做一次清除，避免多个定时器导致页面卡顿
if(timer){
  clearInterval(timer);
  timer = null;
}
//添加定时器，改变当前高亮的索引
timer = setInterval(autoPlay, 2000);

function autoPlay() {
  index++;
  if(index >= list.length) {
    index = 0;
  }
  changeOption(index);
}

function changeOption(curIndex) {
  // console.log(curIndex);
  for(var j = 0; j < list.length; j++) {
    list[j].className = '';
    ps[j].style.display = 'none';
  }
  //高亮显示当前页签
  list[curIndex].className = 'select';
  ps[curIndex].style.display = 'block';
  index = curIndex;
}

has the following effect in the browser:

It can be found that tabs can be automatically switched at certain intervals.

6. Written at the end

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.

Related recommendations:

jQuery mobile Tab tab effect implementation method

Detailed explanation of JavaScript plug-in Tab

About JavaScript plug-in Tab effect sharing

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!