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. [ERROR]pip insall pyodbc

    - 错误代码如下: pip install pyodbc Looking in indexes: http://172.16.1.250/repository/douban/simple Collec ...

  2. MySQL中的幻读，你真的理解吗？

    昨天接到阿里的电话面试,对方问了一个在MySQL当中,什么是幻读.当时一脸懵逼,凭着印象和对方胡扯了几句.面试结束后,赶紧去查资料,才发现之前对幻读的理解完全错误.下面,我们就聊聊幻读. 要说幻读,就 ...

  3. Hibernate入门之命名策略（naming strategy）详解

    前言 JPA和Hibernate都提供了默认映射策略,通过映射将每个实体类映射到具有相同名称的数据库表,它的每个属性都映射到具有相同属性的列, 但是,在实际项目开发中可能出现与默认命名约定不匹配,也就 ...

  4. CSS权威指南（第三版)

    CSS权威指南(第三版).pdf 网盘: https://545c.com/file/24657411-425141851   获取码:  276922

  5. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  6. 「Flink」使用Java lambda表达式实现Flink WordCount

    本篇我们将使用Java语言来实现Flink的单词统计. 代码开发 环境准备 导入Flink 1.9 pom依赖 <dependencies> <dependency> < ...

  7. 关于建立 Carbon Forum 后 设置访问链接的问题

    如果不想访问的是根目录可以如下设置. location /cf { try_files $uri $uri/ /cf/index.php?$query_string;} 这样访问 /cf 目录就可以访 ...

  8. 何时使用异步或同步AJAX

    通常最好使用异步调用 通过优锐课核心java学习笔记中,我们可以看到,码了很多专业的相关知识, 分享给大家参考学习. AJAX代表异步JavaScript和XML,是一项允许异步更新网页的技术,这意味 ...

  9. mybatis 配置--->确认jar包是否正确

    mybatis 配置之前,首先要确保服务器jar包是否成功 配置jar包如下添加mybaties-3.5.2. jar, maven 的 pom.xml 配置如下,查看配置是否成功见 如上分类 Mav ...

  10. 迅雷X v10.1.29.698-免安装SVIP去广告精简版+骨头版+便携版+手雷+Mac精简版

    迅雷X 10.1版本开始,采用Electron软件框架完全重写了迅雷主界面.使用新框架的迅雷X可以完美支持2K.4K等高清显示屏,界面中的文字渲染也更加清晰锐利.新框架的界面绘制.事件处理等方面比老框 ...