Native JS realisiert verschiedene Effekte von Tab Tab-js-Tutorial-php.cn

Vor einiger Zeit habe ich mehrere Artikel über das Verständnis und die Verwendung von CSS-Attributen geschrieben. Heute werde ich Ihnen einen Effekt mitteilen, den wir in der tatsächlichen Arbeit häufiger verwenden – den Tab-Karteneffekt. Schauen wir uns zunächst an, wie der Tab-Tab-Effekt am Beispiel von QQ News aussieht:

Native JS realisiert verschiedene Effekte von Tab Tab

Wann Wenn der entsprechende Titel aktiviert ist, wird der Inhalt angezeigt, der dem Titel entspricht. Dies ist der gleitende Wechsel des Tab-Tab-Effekts. Der Tab-Tab-Effekt umfasst auch den verzögerten Wechsel und automatische Umschaltung. Lassen Sie uns heute mit Ihnen diese drei Effekte des Tab-Tabs kennenlernen.

2. Gemeinsame Codes für die drei Effekte

Die drei Effekte basieren auf der folgenden gemeinsamen HTML-Struktur und dem folgenden CSS-Stil:

Native JS realisiert verschiedene Effekte von Tab Tab

Verwenden Sie im HTML-Code zwei Ps, um den Titel bzw. den Inhalt zu enthalten. Die Anzahl der Titel und die Anzahl des Inhalts müssen gleich sein. Der detaillierte HTML- und CSS-Code lautet wie folgt:

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

3. Analyse des Prinzips des Sliding-Switching-Effekts

Sliding-Switching-Effekt besteht, wie der Name schon sagt, darin, den Inhalt unter dem Titel anzuzeigen, wenn die Maus darüber gleitet. Es ist notwendig, den Stil des aktuellen Titels auf den ausgewählten Status zu setzen (fügen Sie den vom Titel ausgewählten CSS-Stil hinzu, in diesem Fall fügen Sie die Stilklasse hinzu) und legen Sie gleichzeitig den Inhalt unter dem Titel auf fest angezeigt werden, d. h. den Stil festlegen select und andere Der Inhalt unter dem Titel ist so eingestellt, dass er ausgeblendet wird, d. h. der Stil wird festgelegt display:block. Der detaillierte display:none-Code lautet wie folgt: javascript

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

Nach dem Login kopieren

//获取鼠标滑过或点击的标签和要切换内容的元素
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;;
  }
}

Nach dem Login kopieren

Wenn Sie den Effekt von

durch Klicken zum Umschalten von erzielen möchten, müssen Sie nur in < ändern 🎜>. Die Wirkung von onmouseoveronclick im Browser ist wie folgt:

Native JS realisiert verschiedene Effekte von Tab Tab Wenn die Maus über den entsprechenden Titel fährt, wird der entsprechende Inhalt angezeigt Der Titel wird angezeigt.

4. Analyse des Prinzips des verzögerten Schalteffekts

Verzögerter Schalteffekt

bedeutet, wie der Name schon sagt, dass der relevante Inhalt unter dem Titel danach angezeigt wird Die Maus bewegt sich für einen bestimmten Zeitraum über den Titel. Es ist bekannt, dass wir die Funktion verwenden können, um einen bestimmten Zeitraum zu verzögern und dann die zugehörigen Titel und Inhalte zu ändern oder verstecken. Der -Code unterscheidet sich nicht wesentlich vom javascript Schiebeschalteffekt setTimeout. Was wir ändern müssen, ist zunächst festzustellen, ob der Timer javascript vorhanden ist, wir müssen den Timer löschen , andernfalls gibt es mehrere. Ein Timer führt dazu, dass der Umschalteffekt gestört wird, und fügt dann den Code, der den Titelstil und den Titelinhalt ändert, in die Funktion ein. Die Wirkung von timertimersetTimout im Browser ist wie folgt:

var timer = null;

var list = $(&#39;notice-title&#39;).getElementsByTagName(&#39;li&#39;),
    ps = $(&#39;notice-content&#39;).getElementsByTagName(&#39;p&#39;);
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)
  }
}

Nach dem Login kopieren

Native JS realisiert verschiedene Effekte von Tab Tab Wenn die Maus über den Titel gleitet, gibt es Folgendes immer ein bestimmtes Intervall Der Titelinhalt wird nach einer bestimmten Zeit angezeigt.

5. Analyse des Prinzips des automatischen Wechseleffekts

Automatischer Wechseleffekt

bedeutet, wie der Name schon sagt, dass Tabs automatisch gewechselt werden können. In

können wir verwenden, um diesen Effekt zu erzielen. Die spezifischen Schritte sind wie folgt: javascriptsetInterval

Standardmäßig ist der erste Titel ausgewählt, der Inhalt unter dem ersten Titel wird angezeigt und für jeden Titel wird eine ID festgelegt

Stellen Sie fest, ob der Timer vorhanden ist. Löschen Sie den Timer.
Verwenden Sie die Funktion
, um die Funktion „AutoPlay“ auszuführen . Ändern Sie in der AutoPlay-Funktion den Index
größer oder gleich der Anzahl der Titel ist, wird der Wert des angezeigten Index
auf 0 gesetzt ; setIntervalindexindexindexFügen Sie den Index des Titels gleich dem Wert des Anzeigeindex
zur Klasse
Wert, der angezeigt werden soll (
), und der Rest des Titelinhalts wird so geändert, dass er ausgeblendet wird (index); die Wirkung von selectedindexdisplay:blockdisplay:none
im Browser ist wie folgt folgt:

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

//遍历每一个页签并且给他们绑定事件
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;
}

Nach dem Login kopieren

Sie können feststellen, dass Tabs in bestimmten Abständen automatisch gewechselt werden können. Native JS realisiert verschiedene Effekte von Tab Tab 6. Schreiben Sie es am Ende

Okay, heute werde ich die drei Wechseleffekte des Tabs mit Ihnen teilen. Ich hoffe, es dient als Aufwärmübung für alle Sie beherrschen das Prinzip des Tab-Tabs. Seine gleitenden Umschalt-, verzögerten Umschalt- und automatischen Umschalteffekte sind relativ einfach zu erreichen.