Native JS realisiert verschiedene Effekte von Tab Tab

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:

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:

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

//获取鼠标滑过或点击的标签和要切换内容的元素
var titles = $('notice-title').getElementsByTagName('li'),
    ps = $('notice-content').getElementsByTagName('p');
if(titles.length != ps.length){
  return;
}
// 遍历titles下的所有li
for(var i = 0; i  Wenn Sie den Effekt von <p> durch Klicken zum Umschalten von <strong> erzielen möchten, müssen Sie nur </strong> in . Die Wirkung von <code>onmouseover</code><code>onclick</code> im Browser ist wie folgt: </p><p></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 realisiert verschiedene Effekte von Tab Tab" ></span>Wenn die Maus über den entsprechenden Titel fährt, wird der entsprechende Inhalt angezeigt Der Titel wird angezeigt. </p><p>4. Analyse des Prinzips des verzögerten Schalteffekts</p><h2></h2>Verzögerter Schalteffekt<p> 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 <strong> verwenden können, um einen bestimmten Zeitraum zu verzögern und dann die zugehörigen Titel und Inhalte zu ändern oder verstecken. Der </strong>-Code unterscheidet sich nicht wesentlich vom <code>javascript</code> Schiebeschalteffekt <code>setTimeout</code>. Was wir ändern müssen, ist zunächst festzustellen, ob der Timer <code>javascript</code> vorhanden ist, wir müssen den Timer löschen <strong>, 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 </strong> ein. Die Wirkung von <code>timer</code><code>timer</code><code>setTimout</code> im Browser ist wie folgt: </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></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 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. </span></p>5. Analyse des Prinzips des automatischen Wechseleffekts<p></p><h2 id="Automatischer-Wechseleffekt">Automatischer Wechseleffekt</h2> bedeutet, wie der Name schon sagt, dass Tabs automatisch gewechselt werden können. In <p> können wir <strong> verwenden, um diesen Effekt zu erzielen. Die spezifischen Schritte sind wie folgt: </strong><code>javascript</code><code>setInterval</code></p>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 <ol class=" list-paddingleft-2">
<li><p> Stellen Sie fest, ob der Timer vorhanden ist. Löschen Sie den Timer. </p></li>
<li>
<p>Verwenden Sie die Funktion </p>, um die Funktion „AutoPlay“ auszuführen . Ändern Sie in der AutoPlay-Funktion den Index </li> des angezeigten Titels. Wenn der Wert des Index <li> größer oder gleich der Anzahl der Titel ist, wird der Wert des angezeigten Index <p> auf 0 gesetzt ; <code>setInterval</code><code>index</code><code>index</code><code>index</code>Fügen Sie den Index des Titels gleich dem Wert des Anzeigeindex </p> zur Klasse </li> hinzu und setzen Sie den Index des Inhalts gleich dem Wert des Anzeigeindex <li> Wert, der angezeigt werden soll ( <p>), und der Rest des Titelinhalts wird so geändert, dass er ausgeblendet wird (<code>index</code>); die Wirkung von <code>selected</code><code>index</code><code>display:block</code><code>display:none</code></p> im Browser ist wie folgt folgt: </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></p><p><span class="img-wrap">Sie können feststellen, dass Tabs in bestimmten Abständen automatisch gewechselt werden können. <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 realisiert verschiedene Effekte von Tab Tab" ></span>6. Schreiben Sie es am Ende </p><p>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. </p><h2 id="Verwandte-Empfehlungen">Verwandte Empfehlungen: </h2><p></p><p>So implementieren Sie den Tab-Tab-Effekt von jQuery Mobile<br></p><p><a href="http://www.php.cn/js-tutorial-385201.html" target="_self">Detaillierte Erläuterung des JavaScript-Plug-in-Tabs</a></p><p><a href="http://www.php.cn/js-tutorial-382851.html" target="_self">Über die gemeinsame Nutzung der Wirkung des JavaScript-Plug-in-Tabs</a></p><p class="comments-box-content"><br></p>

Das obige ist der detaillierte Inhalt vonNative JS realisiert verschiedene Effekte von Tab Tab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!