Native JS는 Tab 탭의 다양한 효과를 구현합니다.

小云云
풀어 주다: 2018-02-23 14:01:59
원래의
2671명이 탐색했습니다.

전에는 CSS 속성에 대한 이해와 사용법에 대해 여러 글을 썼는데, 오늘은 실제 작업에서 더 많이 사용하는 효과인 탭 효과에 대해 공유하겠습니다. 먼저 탭 탭 효과가 어떤지 살펴보겠습니다. QQ뉴스를 예로 들면 다음과 같은 효과가 있습니다.

Native JS는 Tab 탭의 다양한 효과를 구현합니다.

해당 제목 위에 마우스를 올리면 해당 제목에 해당하는 내용이 나타납니다. 탭 탭의 슬라이딩 전환 효과가 나타납니다. 탭 탭 효과에는 지연 전환자동 전환 효과도 포함됩니다. 오늘은 탭탭의 3가지 효과를 함께 배워보겠습니다.

2. 세 가지 효과에 대한 공통 코드

세 가지 효과는 다음과 같은 일반적인 HTML 구조와 CSS 스타일을 기반으로 합니다.
Native JS는 Tab 탭의 다양한 효과를 구현합니다.

html 코드에서는 제목과 제목을 포함하는 데 사용되는 두 개의 p를 사용합니다. 내용, 제목 수, 내용 수가 동일해야 합니다. 자세한 HTML 코드와 CSS 코드는 다음과 같습니다.

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. 슬라이딩 스위칭 효과 원리 분석

슬라이딩 스위칭 효과는 마우스를 위로 슬라이드하면 제목 아래의 내용이 표시됩니다. 현재 제목의 스타일을 선택 상태로 설정하는 동시에(제목에서 선택한 CSS 스타일을 추가, 이 경우 select 스타일 클래스 추가) 설정해야 합니다. 표시할 제목 아래의 콘텐츠, 즉 스타일 display:block을 설정하고, 다른 제목 아래의 콘텐츠를 숨기도록 설정합니다. 즉, 스타일을 display:로 설정합니다. 없음. 자세한 javascript 코드는 다음과 같습니다. select样式类),同时将该标题下的内容置为显示,即设置样式display:block,而其他标题下的内容设置为隐藏,即设置样式display:none。详细的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 < 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;;
  }
}
로그인 후 복사

如果需要实现点击切换的效果,只需要将onmouseover修改为onclick即可。

在浏览器中的效果如下所示:

Native JS는 Tab 탭의 다양한 효과를 구현합니다.

当鼠标过相关标题的时候,标题中对应的内容则会显示出来。

4.延迟切换效果原理分析

延迟切换效果,顾名思义,就是鼠标滑动到标题上一定的时间后才显示标题下相关的内容,熟悉javascript的同学知道,我们可以使用setTimeout函数来达到延迟一定的时间,然后再将相关的标题和内容修改为显示与隐藏。其javascript代码与滑动切换效果相差不大,需要我们修改的是首先判断定时器timer是否存在,如果存在,需要清除定时器timer,否则就会出现多个定时器,导致切换效果紊乱,然后将修改标题样式和标题内容的代码放到setTimout函数中。

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)
  }
}
로그인 후 복사

在浏览器中的效果如下:

Native JS는 Tab 탭의 다양한 효과를 구현합니다.

当鼠标滑过标题的时候,总是间隔一定的时间后标题内容才出现。

5.自动切换效果原理分析

自动切换效果,顾名思义,就是选项卡可以自动切换。在javascript中,我们可以使用setInterval来实现这种效果。具体步骤如下:

  1. 默认第一个标题处于选中状态,第一个标题下的内容显示,同时给每一个标题设定id;

  2. 判断定时器是否存在,如果存在,则清除定时器;

  3. 利用setInterval函数,每隔一定的时间(本例中设定的时间是2s)执行函数autoPlay,在autoPlay函数中,改变显示标题的下标index,如果下标index的值大于等于标题的个数,则显示下标index的值置为0;

  4. 将标题的下标等于显示的下标index值增加selected类,同时将内容的下标等于显示下标index值设置为显示(display:block),其余的标题内容修改为隐藏(display:none

    //当前高亮显示的页签索引
    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;
    }
    로그인 후 복사
    rrreee 클릭 전환 효과를 얻으려면 onmouseoveronclick 캔입니다. 브라우저에서 <p></p>의 효과는 다음과 같습니다: <p><span class="img-wrap"><img src="https://img.php.cn/upload/article/000/054/025/3b9682f9b668eab4890ff83825e0f869-4.gif" alt="Native JS는 Tab 탭의 다양한 효과를 구현합니다." ><img src="https://img.php.cn/upload/article/000/054/025/947a04b099e04a1fa765b4c4cc7070ad-2.gif" alt="Native JS는 Tab 탭의 다양한 효과를 구현합니다." ></span></p> <p>해당 제목 위에 마우스를 올리면 제목에 해당 내용이 표시됩니다. </p> <h2>4. 지연 전환 효과의 원리 분석</h2> <p></p>지연 전환 효과<p>는 이름에서 알 수 있듯이 일정 시간 동안 제목 위로 마우스를 이동하면 제목 아래에 해당 내용이 표시됩니다. <code>javascript에 익숙한 분들은 setTimeout 함수를 사용하여 일정 시간 동안 지연한 다음 관련 제목과 내용을 수정하여 표시하거나 숨길 수 있다는 것을 알고 있습니다. javascript 코드는
    슬라이딩 전환 효과

    와 크게 다르지 않습니다. 수정해야 할 것은 먼저 타이머 timer가 존재하는지 확인하는 것입니다. 타이머를 지우려면 타이머를 사용하세요. 그렇지 않으면 여러 개의 타이머가 나타나서 전환 효과가 혼란스러워질 것입니다. 그런 다음 제목 스타일과 제목 내용을 수정하는 코드를 setTimout 함수에 넣으세요. .

    rrreee브라우저에서의 효과는 다음과 같습니다:

    🎜Native JS는 Tab 탭의 다양한 효과를 구현합니다.🎜🎜 🎜 제목 위에 마우스를 올리면 일정 시간이 지난 후 항상 제목 내용이 나타납니다. 🎜🎜5. 자동 전환 효과의 원리 분석🎜🎜🎜자동 전환 효과🎜 이름 그대로 탭이 자동으로 전환될 수 있습니다. javascript에서는 setInterval을 사용하여 이 효과를 얻을 수 있습니다. 구체적인 단계는 다음과 같습니다. 🎜
    1. 🎜기본적으로 첫 번째 제목이 선택되고 첫 번째 제목 아래의 콘텐츠가 표시되며 각 제목에 ID가 설정됩니다. ; 🎜🎜
    2. 🎜타이머가 있는지 확인하고, 있으면 타이머를 삭제하세요. 🎜🎜
    3. 🎜 일정한 간격으로 타이머를 설정하려면(설정된 시간) setInterval 함수를 사용하세요. 이 예에서는 2s입니다) ) autoPlay 기능에서 표시된 제목의 아래 첨자 index 값이 다음보다 큰 경우 변경합니다. 또는 제목 수와 같으면 아래 첨자 색인
    값을 0으로 설정합니다. 🎜🎜
  5. 🎜 제목의 아래 첨자를 표시된 아래 첨자 색인과 동일하게 설정합니다. 값을 추가하고 selected 클래스를 추가하는 동시에 콘텐츠의 아래 첨자를 표시할 표시 아래 첨자 index 값과 동일하게 설정합니다(display:blockdisplay:block code>), 나머지 제목 내용을 숨기도록 수정합니다(display:none code>). 브라우저에서 🎜🎜🎜rrreee🎜의 효과는 다음과 같습니다. 🎜🎜🎜🎜🎜🎜 🎜일정 시간이 지나면 탭이 자동으로 전환되는 것을 확인할 수 있습니다. 🎜🎜6. 마지막에 작성🎜🎜오늘은 탭 탭의 세 가지 전환 효과를 여러분과 함께 공유하고, 슬라이딩 전환을 포함한 탭 탭의 원리를 익히는 데 도움이 되기를 바랍니다. 지연된 전환 및 자동 전환 전환 효과는 상대적으로 달성하기 쉽습니다. 🎜🎜관련 권장 사항: 🎜🎜🎜🎜jQuery 모바일 탭 효과 구현 방법🎜🎜

    JavaScript 플러그인 탭에 대한 자세한 설명

    JavaScript 플러그인 탭 효과 공유에 대해


  6. 위 내용은 Native JS는 Tab 탭의 다양한 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!