tab栏切换

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    .wrapper {

      width: 1000px;

      height: 475px;

      margin: 0 auto;

      margin-top: 100px;

    }

    .tab {

      border: 1px solid #ddd;

      border-bottom: 0;

      height: 36px;

      width: 320px;

    }

    .tab li {

      position: relative;

      float: left;

      width: 80px;

      height: 34px;

      line-height: 34px;

      text-align: center;

      cursor: pointer;

      border-top: 4px solid #fff;

    }

    .tab span {

      position: absolute;

      right: 0;

      top: 10px;

      background: #ddd;

      width: 1px;

      height: 14px;

      overflow: hidden;

    }

    .products {

      width: 1002px;

      border: 1px solid #ddd;

      height: 476px;

    }

    .products .main {

      float: left;

      display: none;

    }

    .products .main.selected {

      display: block;

    }

    .tab li.active {

      border-color: red;

      border-bottom: 0;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $(".tab-item").mouseenter(function () {

        //两件事件 1.给当前的选中增加active的样式同时移除兄弟的active样式

        //2. tab选中的时候，获取索引，给对应的产品div增加样式并移除兄弟的样式

        $(this).addClass("active").siblings().removeClass("active");

        var idx = $("this").index();

        $(".main").eg(idx).addClass("selected").siblings().removeClass("selected");

      })

    }) ；

  </script>

</head>

<body>

  <div class="wrapper">

    <ul class="tab">

      <li class="tab-item active">国际大牌<span>◆</span></li>

      <li class="tab-item">国妆名牌<span>◆</span></li>

      <li class="tab-item">清洁用品<span>◆</span></li>

      <li class="tab-item">男士精品</li>

    </ul>

    <div class="products">

      <div class="main selected">

        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>

      </div>

      <div class="main">

        <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>

      </div>

      <div class="main">

        <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>

      </div>

      <div class="main">

        <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>

      </div>

    </div>

  </div>

</body>

</html>

jQuery---tab栏切换的更多相关文章

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

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

  2. tab栏切换

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

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

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

  4. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  5. tab栏切换制作

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

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

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

  7. JS实现 Tab栏切换案例

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

  8. tab栏切换的特殊效果

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

  9. tab栏切换，内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

  10. JavaScript实现Tab栏切换

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

随机推荐

  1. Windwos日志分析

    Windows日志分析工具 查看系统日志方法: 在“开始”菜单上,依次指向“所有程序”.“管理工具”,然后单击“事件查看器” 按 "Window+R",输入 ”eventvwr.m ...

  2. 解决关闭SSH进程CobaltStrike自动关闭

    解决关闭SSH进程CobaltStrike自动关闭 0x0 那么为什么ssh一关闭,程序就不再运行了? 答:元凶:SIGHUP 信号 让我们来看看为什么关掉窗口/断开连接会使得正在运行的程序死掉. 在 ...

  3. centos7上安装docker社区版

    container(容器) docker(集装箱) 容器的优点 1. 启动速度快 2. 节省资源 3. 兼容性高 保证机器正常上网 #ping www.baidu.com CPU需要支持虚拟化 # g ...

  4. C语言基础五 数组

    数组跟变量的区别? 数组是可以在内存中连续存储多个元素的结构,所有元素必须属于相同类型. 格式:元素类型 数组名[元素个数]: 数组的特点: 只能存放单一元素的数据,里面存放的数据成为元素. 数组的声 ...

  5. js文本复制插件&vue

    /* HTML: * <a href="javascript:;" class="copy" data-clipboard-text="copy ...

  6. centos7.x中安装SQL Server

    本文内容是采集的好几位博主的博文进行的一个整合,内容更为精准和详尽,以下是我参照的几篇博文地址: 微软官方文档:https://docs.microsoft.com/zh-cn/sql/linux/s ...

  7. redis 5.0.7 源码阅读——压缩列表ziplist

    redis中压缩列表ziplist相关的文件为:ziplist.h与ziplist.c 压缩列表是redis专门开发出来为了节约内存的内存编码数据结构.源码中关于压缩列表介绍的注释也写得比较详细. 一 ...

  8. fastJson&edis

    fastJson&redis 1. fastJson 1.1 依赖 <dependency> <groupId>com.alibaba</groupId> ...

  9. OpenCL中读取image时的坐标

    本文测试OpenCL中读取image数据时关于坐标的两个问题: 使用float2坐标读取 使用int2坐标读取 首先完整的测试代码如下,测试平台为SDM855: #include <CL/cl. ...

  10. linux操作系统搭建测试环境

    环境:linux操作系统.tomcat服务器.mysql数据库.火狐浏览器 工具:secureCRT.FileZalla 一.安装vmware虚拟机 二.在虚拟机上安装linux操作系统,参考http ...