<!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;}

  ul {list-style: none;}

  .box {

    width: 1000px;height: 475px;margin: 100px auto;

  }

  .tab {

    border: 1px solid rgba(205, 211, 211, 0.87); height: 36px;width: 320px;

  }

  .tab-item {

    width: 80px;height: 34px;float: left;line-height: 34px;

    text-align: center;border-top: 3px solid white;

    /* 3px是为了去掉和hover状态下3pxborder-top的变化过程 */

  }

  span {

    padding-left: 5px; color: rgba(205, 211, 211, 0.87);

  }

  .tab-item:hover {border-top: 3px solid red;}

  .active {border-top: 3px solid red;}

  .products {border: 1px solid rgba(205, 211, 211, 0.87);}

  .products .main {display: none;}

  .products .selected {display: block;}

  </style>

</head>

<body>

<div class="box">

    <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="data:images/guojidapai.jpg" alt=""/></a>

          </div>

          <div class="main">

            <a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>

          </div>

          <div class="main">

            <a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>

          </div>

          <div class="main">

            <a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>

    </div>

</div>

</div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

  <script>

    $(function(){

      $("li").mouseenter(function(){

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

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

        // 给li注册事件，this添加active同时去掉其他相邻兄弟的active

        var idx=$(this).index();//当前的索引放在idx中

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

        //.main中当前索引添加selected，其他去掉selected

      });

    });

  </script>

</body>

</html>

jq制作tab栏的更多相关文章

  1. tab栏切换制作

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

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

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

  3. 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  4. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  5. tab栏切换的特殊效果

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

  6. 面向对象tab栏例子分析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ViewPage显示Fragment集合实现左右滑动并且出现tab栏--第三方开源--SlidingTabLayout和SlidingTabStrip实现

    注意:有关Fragment的方法和ViewPager的全部是android.support.v4包的,否则会报很多的错误 MainActivity: package com.zzw.fragmentt ...

  8. NotifyIcon制作任务栏托盘菜单

    常用软件飞信.QQ在任务栏中的图标ICO,以及鼠标移动到图标是右键菜单选项 1.首先制作任务栏图标 this.ShowInTaskbar = true; 2.窗体最小化时或者关闭时隐藏到任务栏,有时候 ...

  9. Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页

    tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...

随机推荐

  1. chrome 浏览器 添加访问助手来访问网上应用商店

    chrome浏览器的强大之处,在于可以chrome浏览器的扩展程序来实现很多功能.然而不能下载扩展程序.可以借助chrome访问助手来实现: 下载chrome访问助手:https://pan.baid ...

  2. arcgis增大缩放级别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Java 分页对象

    以前一直没有自己写过分页对象,自己模仿着写了一个分页对象,写完之后感觉也是挺简单的 package com.css.util; import java.io.Serializable;import j ...

  4. Python学习笔记（四）Python程序的控制结构

    在学习了 Python 的基本数据类型后,我们就要开始接触Python程序的控制结构,了解 Python 是如何使用控制结构来更改程序的执行顺序以满足多样的功能需求.如果有的小伙伴在之前学过C语言,j ...

  5. SDUT-3376_数据结构实验之查找四：二分查找

    数据结构实验之查找四:二分查找 Time Limit: 30 ms Memory Limit: 65536 KiB Problem Description 在一个给定的无重复元素的递增序列里,查找与给 ...

  6. SQL注入绕过的技巧总结

    sql注入在很早很早以前是很常见的一个漏洞.后来随着安全水平的提高,sql注入已经很少能够看到了.但是就在今天,还有很多网站带着sql注入漏洞在运行.稍微有点安全意识的朋友就应该懂得要做一下sql注入 ...

  7. MaxCompute推出面向开发者的专属版本，普惠大数据开发者

    3月20号,阿里云正式对外宣布推出MaxCompute产品的新规格-开发者版.MaxCompute开发者版是阿里云大数据计算服务发布的开发者专属版本.区别于原有的按量付费.按CU预付费规格,开发者版是 ...

  8. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. Spring_使用(JDBC)

    Spring_对JDBC的支持 使用JdbcTemplate更新数据库 导入jar包 创建applicationcontext.xml <?xml version="1.0" ...

  10. QT语言翻译

    QT中多语言的实现方式: 1.代码中tr运用 2.使用工具生成ts文件 3.翻译ts文件 4.生成qm文件 5.程序加载 以下内容程序加载时放入即可. QString appPath = QCoreA ...