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. 和内嵌的iframe进行通讯

    利用内置iframe进行通讯 1. 在当前网页设置iframe网页(监听iframe发来postmessage消息事件) a. 外部网页接收数据: 回调方法,其中e.data为传入数据: const ...

  2. [Python]执行Linux命令

    使用subprocess模块 import subprocess # 防火墙服务存在关闭状态 child1 = subprocess.Popen(["systemctl status fir ...

  3. vscode+php+xdebug Time-out connecting to client (Waited: 200 ms)

    如果php.ini配置没错,且端口无误,那么就可能是配置文件选错了. vscode里面有两个配置文件,一个是 Listen for xdebug ,一个是 Lanuch currently open ...

  4. HA: Dhanush Vulnhub Walkthrough

    靶机下载链接: https://www.vulnhub.com/entry/ha-dhanush,396/ 主机扫描: 主机端口扫描: HTTP目录爬取 使用dirb dirsearch 爬取均未发现 ...

  5. Android Studio 学习笔记(五)：WebView 简单说明

    Android中一个用于网页显示的控件,实际上,也可以看做一个功能最小化的浏览器,看起来类似于在微信中打开网页链接的页面.WebView主要用于在app应用中方便地访问远程网页或本地html资源.同时 ...

  6. [Linux] ubuntu下yarn依赖管理工具的安装和使用

    Yarn 对你的代码来说是一个包管理器, 你可以通过它使用全世界开发者的代码, 或者分享自己的代码.Yarn 做这些快捷.安全.可靠,所以你不用担心什么.通过Yarn你可以使用其他开发者针对不同问题的 ...

  7. 解决burpsuit 浏览器您的连接不是私密连接的问题

    转载来源:https://www.cnblogs.com/hun-ya/p/8365255.html Burp Suite要抓HTTPS的包的话,是需要有Burp Suite的CA证书的 为什么要证书 ...

  8. CentOS7安装Python3.6.8

    1.首先通过yum安装python可能用到的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel ...

  9. SpringBoot 教程之 banner 定制

    目录   简介  变量  配置  编程  示例  参考资料 简介 Spring Boot 启动时默认会显示以下 LOGO: . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ ...

  10. 第1章.Collections类、泛型类和Timing类概述

    1.1 群集(collection)的定义 群集是一种结构化的数据类型.它存储数据,并且提供数据的添加.删除.更新操作,以及对群集的不同属性值的设置与返回操作. 群集可以分为两类:线性的和非线性的. ...