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. idea springboot 使用JRebel热部署

    1.首先在idea中下载jrebel.由于已经下载过了.上这样 2.下载jrebel破解插件 https://gitee.com/gsls200808/JrebelLicenseServerforJa ...

  2. 1994_An Algorithm To Reconstruct Wideband Speech From Narrowband Speech Based On Codebook Mapping

    论文地址:基于码本映射的窄带语音宽带重建算法 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/12144324.html 摘要 本文提出了一种从窄带 ...

  3. NetCore3.0实现自定义IOC容器注入

    在之前的ASP.NET MVC实现依赖注入一文中,通过替换默认的ControllerFactory来达到对Controller生命周期的拦截,实现自定义的对象注入,在NetCore3.0中需要重新实现 ...

  4. python range函数（42）

    在python中使用最多的除了print函数 就是 for循环 了,那么这里就不得不介绍一下python内置函数range函数! 一.range函数简介 python range函数可创建一个整数列表 ...

  5. （转）elasticsearch collapse 折叠字段应用

    转自:https://elasticsearch.cn/article/132 在 Elasticsearch 5.x 有一个字段折叠(Field Collapsing,#22337)的功能非常有意思 ...

  6. 【python基础语法】函数的作用域和内置函数和关键字（第7天课堂笔记）

    一.函数的作用域: 1.全局变量 2.局部变量 3.global 二.内置函数 1.常见的内置函数 print : 输出 input : 输入 type : 查看数据类型 id : 获取数据的内存地址 ...

  7. libmodbus库linux 嵌入式设备中的使用

    libmodbus库的交叉编译:1]到libmodbus官网https://libmodbus.org/download/下载安装包,内部自带configure文件,官网推荐v3.1.6稳定版.另外注 ...

  8. layui导出表格设置常用函数

    1.设置导出单元格为数字格式 字段名: function (value, line, data) { return { v: value, t: 'n' } }

  9. python进阶----深拷贝&浅拷贝

    复制需要区分,,复制的是源文件的数据,还是指向源文件数据的地址 1.引用   b=a时,理解为b指向了a指向的数据,相当于引用复制 a=[1,2] b=a #验证复制的是数据还是地址 #1.查看ab的 ...

  10. 阿里云K8S下玩.NET CORE 3.1

    1. 创建阿里云K8S集群,本文以标准托管集群为例 1.1 创建一个 2台 centos 2core 4G的 k8s 集群 1.2 创建成功的模样 2. 创建 asp.net core webapi项 ...