집 >웹 프론트엔드 >JS 튜토리얼 >Native JS는 Tab 탭의 다양한 효과를 구현합니다.

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

小云云원래의: 2018-02-23 14:01:592695검색

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

해당 제목 위에 마우스를 올리면 해당 제목에 해당하는 내용이 나타납니다. 탭 탭의 슬라이딩 전환 효과가 나타납니다. 탭 탭 효과에는 지연 전환 및 자동 전환 효과도 포함됩니다. 오늘은 탭탭의 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来实现这种效果。具体步骤如下：

默认第一个标题处于选中状态，第一个标题下的内容显示，同时给每一个标题设定id;
判断定时器是否存在，如果存在，则清除定时器；
利用setInterval函数，每隔一定的时间(本例中设定的时间是2s)执行函数autoPlay，在autoPlay函数中，改变显示标题的下标index，如果下标index的值大于等于标题的个数，则显示下标index的值置为0；
将标题的下标等于显示的下标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 클릭 전환 효과를 얻으려면 onmouseover를 onclick 캔입니다. 브라우저에서 의 효과는 다음과 같습니다: <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 탭의 다양한 효과를 구현합니다." > 해당 제목 위에 마우스를 올리면 제목에 해당 내용이 표시됩니다. <h2>4. 지연 전환 효과의 원리 분석</h2> 지연 전환 효과는 이름에서 알 수 있듯이 일정 시간 동안 제목 위로 마우스를 이동하면 제목 아래에 해당 내용이 표시됩니다. <code>javascript에 익숙한 분들은 setTimeout 함수를 사용하여 일정 시간 동안 지연한 다음 관련 제목과 내용을 수정하여 표시하거나 숨길 수 있다는 것을 알고 있습니다. javascript 코드는
슬라이딩 전환 효과
와 크게 다르지 않습니다. 수정해야 할 것은 먼저 타이머 timer가 존재하는지 확인하는 것입니다. 타이머를 지우려면 타이머를 사용하세요. 그렇지 않으면 여러 개의 타이머가 나타나서 전환 효과가 혼란스러워질 것입니다. 그런 다음 제목 스타일과 제목 내용을 수정하는 코드를 setTimout 함수에 넣으세요. .
rrreee브라우저에서의 효과는 다음과 같습니다:
🎜🎜🎜 🎜 제목 위에 마우스를 올리면 일정 시간이 지난 후 항상 제목 내용이 나타납니다. 🎜🎜5. 자동 전환 효과의 원리 분석🎜🎜🎜자동 전환 효과🎜 이름 그대로 탭이 자동으로 전환될 수 있습니다. javascript에서는 setInterval을 사용하여 이 효과를 얻을 수 있습니다. 구체적인 단계는 다음과 같습니다. 🎜
1. 🎜기본적으로 첫 번째 제목이 선택되고 첫 번째 제목 아래의 콘텐츠가 표시되며 각 제목에 ID가 설정됩니다. ; 🎜🎜
2. 🎜타이머가 있는지 확인하고, 있으면 타이머를 삭제하세요. 🎜🎜
3. 🎜 일정한 간격으로 타이머를 설정하려면(설정된 시간) setInterval 함수를 사용하세요. 이 예에서는 2s입니다) ) autoPlay 기능에서 표시된 제목의 아래 첨자 index 값이 다음보다 큰 경우 변경합니다. 또는 제목 수와 같으면 아래 첨자 색인
값을 0으로 설정합니다. 🎜🎜
🎜 제목의 아래 첨자를 표시된 아래 첨자 색인과 동일하게 설정합니다. 값을 추가하고 selected 클래스를 추가하는 동시에 콘텐츠의 아래 첨자를 표시할 표시 아래 첨자 index 값과 동일하게 설정합니다(display:blockdisplay:block code>), 나머지 제목 내용을 숨기도록 수정합니다(display:none code>). 브라우저에서 🎜🎜🎜rrreee🎜의 효과는 다음과 같습니다. 🎜🎜🎜🎜🎜🎜 🎜일정 시간이 지나면 탭이 자동으로 전환되는 것을 확인할 수 있습니다. 🎜🎜6. 마지막에 작성🎜🎜오늘은 탭 탭의 세 가지 전환 효과를 여러분과 함께 공유하고, 슬라이딩 전환을 포함한 탭 탭의 원리를 익히는 데 도움이 되기를 바랍니다. 지연된 전환 및 자동 전환 전환 효과는 상대적으로 달성하기 쉽습니다. 🎜🎜관련 권장 사항: 🎜🎜🎜🎜jQuery 모바일 탭 효과 구현 방법🎜🎜
JavaScript 플러그인 탭에 대한 자세한 설명

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

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

JavaScript jquery css html select JS display

성명：

이전 기사：빠른 라우팅 관리를 위한 여러 가지 자동화된 방법 공유다음 기사：빠른 라우팅 관리를 위한 여러 가지 자동화된 방법 공유