要求：当鼠标点击上面相应的选项卡（tab），下面页面的内容也随之而改变。

结构分析：

　　全部的内容都放到一个大的盒子里面，盒子里面又可以分为上面和下面两个盒子。

　　上面的盒子放了 5个li，装着5个小的选项卡，默认会有一个被选中；

　　下面的盒子也包含了 5个 div 模块，模块内容与上面的选项一一对应，当前默认的只有第一个 div会被显示出来。

实现思路：

点击切换选项卡部分

Tab 栏切换有2个大的 模块

1、上面模块的选项卡，点击某一个，改变当前样式，底色变为红色，字体颜色变为白色。而其他的选项卡样式不发生改变（排他思想）

通过修改类名的方式实现。

2、下面模块的内容，会随着上面的选项卡变化。所以下面模块变化写到点击事件里面。

规律：下面的模块显示的内容和上面选项卡一一对应，相匹配。

核心思路：给上面模块里面所有的 li 添加自定义属性，属性值从 0 开始作为索引号。

 排他思想：通过 for循环遍历数组中的元素，进入循环之后首先消除所有部分的样式，接着再为所点击的当前部分添加样式。

通过 setAttribute（name，value）创建自定义属性，name指的是为元素设置的自定义属性，value为自定义属性添加的属性值。

通过 getAttribute（name）获取元素的属性。name是属性的名称。

默认第一个选项卡对应的下面模块是显示的，需要在添加行内样式（style='display:block'）因为CSS行内样式的优先级高于外部样式，会优先显示。

而（items[index].style.display = 'block';）这一句也相当于创建了行内样式。

实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab栏切换</title>

    <style>

    *{

        margin:0;

        padding:0;

    }

    .tab{

        width:800px;

        height:45px;

        border:1px solid #ccc;

        border-bottom:1px solid #c81623;

        background: #fafafa;

        position:relative;

        margin:100px auto;

    }

    .tab_list li{

        width:160px;

        height:45px;

        list-style:none;

        line-height:45px;

        text-align: center;

        float:left;

    }

    .tab_list .current{

        background-color:#c81623;

        color:#fff;

    }

    .item{

        width:800px;

        height: 200px;

        padding-top:40px;

        /*line-height:200px;*/

        font-size: 30px;

        color:#fff;

        text-align: center;

        text-shadow:2px 2px 4px #000000;

        background: #efefef;

        /*opacity: 0.8;*/

        top:47px;

        position:absolute;

    }

    </style>

</head>

<body>

<div class='tab'>

        <div class='tab_list'>

            <ul>

                <li class='current'>个性推荐</li>

                <li>歌单</li>

                <li>主播电台</li>

                <li>排行榜</li>

                <li>歌手</li>

            </ul>

        </div>

    <div class='tab_con'>

        <div class="item one" style='display:block'>每日歌曲推荐</div>

        <div class="item two">精品歌单倾心推荐，给最懂音乐的你</div>

        <div class="item thr">上瘾烟嗓情感之声</div>

        <div class="item fou">新歌飙升榜</div>

        <div class="item fiv">歌手排行榜</div>

    </div>

</div>

<!--  tab 栏切换有2个模块

 模块的选项卡，点击其中的某一个，被点击的这一个底色将变成红色的，其余的不变（排他思想）使用修改类的名称的方式。 -->

<!--  下面显示模块内容，会随着上面的选项卡变化，所以下面模块变化写到点击事件里面。

 规律：下面模块显示内容和上面的选项卡一一对应，相匹配。

  -->

 <script>

     var tab_list = document.querySelector('.tab_list');

     var lis = tab_list.querySelectorAll('li');

     var items = document.querySelectorAll('.item');

     //for 循环绑定点击事件

     for(var i=0;i < lis.length;i++){

         lis[i].setAttribute('index',i);

        lis[i].onclick = function() {

            //

             for(var i=0;i < lis.length;i++){

                 lis[i].className = '';

             }

             //留下现在需要用的

             this.className = 'current';

             //下面显示内容模块

             var index = this.getAttribute('index');

             console.log(index);

             //去掉其他的 item，让这些隐藏起来

             //只留下当前的 item，让它显示出来

             for(var i=0;i<items.length;i++){

                 items[i].style.display='none';

             }

             items[index].style.display = 'block';

         }

     }

 </script>

</body>

</html>

实现效果：

点击其它选项

JS实现 Tab栏切换案例的更多相关文章

  1. tab栏切换案例

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. js 实现tab栏切换效果

    效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  4. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  5. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  6. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  7. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  8. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

  9. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. C++学习笔记-static

    static做为关键字,在C++语言中运用在类中,代表着这个属性或者方法属于这个类 如果生成的对象修改了这个成员,那么其他对象共享修改后的值 定义和初始化 class ABC { public: in ...

  2. java初学者编译简单的计算机

    package com.yj.test; import java.awt.BorderLayout; import java.awt.Font; import java.awt.GridLayout; ...

  3. sqlalchemy映射数据库

    from sqlalchemy import create_engine,Column,Integer,String from sqlalchemy.ext.declarative import de ...

  4. CF171C 【A Piece of Cake】

    遵从题意枚举暴力读人n,再求出$\sum^n_1a[i]*i$然后输出答案,(记得开个long long以免炸掉)以下是代码: #include<bits/stdc++.h> using ...

  5. Sigma (化简）牛客多校第一场 -- Integration

    思路: 可以裂项化简,类似找规律,可以两项.三项代进去试试看. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <c ...

  6. EXKMP模版

    这道题目折腾了我好一会啊,出于尊重我要先放我们师兄的博客 1178: [视频]EXKMP模版:最长共同前缀长度 时间限制: 1 Sec  内存限制: 128 MB提交: 180  解决: 123[提交 ...

  7. jmeter 获取图形验证码接口测试

    今天开发提测了一个图形验证码的接口,以前没有测过这个,上来有点懵..... 记录一下. 使用jmeter配置好接口和参数,运行后查看结果树,显示都是乱码 解决方法: 添加一个后置处理器--beansh ...

  8. 爬虫实例学习——爬取酷狗TOP500数据

    酷狗网址:https://www.kugou.com/yy/rank/home/1-8888.html?from=rank 环境:eclipse+pydev import requests from ...

  9. L2-013. 红色警报(并查集+无向图联通分量)

    战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域,而失去一个城市并不 ...

  10. Spring经典高频面试题，原来是长这个样子

    Spring经典高频面试题,原来是长这个样子 2019年08月23日 15:01:32 博文视点 阅读数 719   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...