<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        li {

            list-style-type: none;

        }

        .tab {

            width: 978px;

            margin: 100px auto;

        }

        .tab_list {

            height: 39px;

            border: 1px solid #ccc;

            background-color: #f1f1f1;

        }

        .tab_list li {

            float: left;

            height: 39px;

            line-height: 39px;

            padding: 0 20px;

            text-align: center;

            cursor: pointer;

        }

        .tab_list .current {

            background-color: #c81623;

            color: #fff;

        }

        .item_info {

            padding: 20px 0 0 20px;

        }

        .item {

            display: none;

        }

    </style>

</head>

<body>

    <div class="tab">

        <div class="tab_list">

            <ul>

                <li class="current">商品介绍</li>

                <li>规格与包装</li>

                <li>售后保障</li>

                <li>商品评价（50000）</li>

                <li>手机社区</li>

            </ul>

        </div>

        <div class="tab_con">

            <div class="item" style="display: block;">

                商品介绍模块内容

            </div>

            <div class="item">

                规格与包装模块内容

            </div>

            <div class="item">

                售后保障模块内容

            </div>

            <div class="item">

                商品评价（50000）模块内容

            </div>

            <div class="item">

                手机社区模块内容

            </div>

        </div>

    </div>

    <script type="text/javascript">

        //获取元素

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

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

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

        //遍历tab标签

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

            // 为标题添加索引

           lis[i].setAttribute("data-index",i);

           //绑定事件

           lis[i].onclick = function() {

               //将其他tab的class清楚掉，排他思想

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

                   lis[i].className = "";

               }

               this.className = "current";

               // 切换标签内容

               var index = this.getAttribute("data-index");

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

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

               }

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

           }

        }

    </script>

</body>

</html>

简单的tab栏切换的更多相关文章

  1. tab栏切换

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

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

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

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

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

  4. tab栏切换制作

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

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

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

  6. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  7. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  8. angular 4 实现的tab栏切换

    管理系统 tab 切换页,是一种常见的需求,大概如下: 点击左边菜单,右边显示相应的选项卡,然后不同的选项卡面可以同时编辑,切换时信息不掉失! 用php或.net,java的开发技术,大概是切换显示, ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. [ACTF2020 新生赛]Exec

    0x00 知识点 命令执行 这里见了太多了..以前也写过: https://www.cnblogs.com/wangtanzhi/p/12246386.html 命令执行的方法大抵是加上管道符或者分号 ...

  2. jQuery文档加载事件

    $(document).ready(handler) $().ready(handler) (this is not recommended) $(handler) 相当于: $(document). ...

  3. DCGAN

    Deep Convolutional Generative Adversarial Networks we introduced the basic ideas behind how GANs wor ...

  4. 2.9 初识 jetpack

    Android Jetpack 组件 Android Jetpack 组件是库的集合 这些库是为协同工作而构建的,也可以单独采用,同时利用 Kotlin 语言功能帮助提高工作效率.可全部使用,也可混合 ...

  5. gentoo 修改键盘映射

    gentoo 上面修改键盘映射分为两种,一种是终端环境,一种是X环境. 终端环境 https://www.emacswiki.org/emacs/MovingTheCtrlKey https://wi ...

  6. 18个python的高效编程技巧

    01 交换变量 >>>a=3 >>>b=6 这个情况如果要交换变量在c++中,肯定需要一个空变量.但是python不需要,只需一行,大家看清楚了 >>& ...

  7. POJ 1273：Drainage Ditches 网络流模板题

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 63339   Accepted: 2443 ...

  8. Maven:maven依赖jar包冲突处理

    Maven多模块项目中偶尔会遇到这种问题:明明项目中相关的jar包已经通过pom.xml引进来了,还是报错找到不到相关的类的错误.这种时候,基本上可以断定是jar包冲突的问题. 很多情况下jar包会通 ...

  9. 78.objects对象所属类原理分析

    def index3(request): # 查找文章题目中包含中国的文章分类 category = Category.objects.filter(article__title__contains= ...

  10. WGAN将数值限制在一定范围内 Python代码 tf.clip_by_value(p, -0.01, 0.01))

    tf.clip_by_value(p, min, max))   运用的是交叉熵而不是二次代价函数. 功能:可以将一个张量中的数值限制在(min,max)内.(可以避免一些运算错误:可以保证在进行lo ...