<!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. python 单元测试之初次尝试

    python 语言中有很多单元测试框架和工具,而unittest单元测试框架作为标准python语言中的一个模块.是其他框架和工具的基础.想要进行单元测试,我们需要使用到unittest框架中的功能. ...

  2. 为什么不用原生的Spring Cloud Config

    引言 近几年传统应用架构已经逐渐朝着微服务架构演进.那么随着业务的发展,微服务越来越庞大,此时服务配置的管理变得会复杂起来.为了方便服务配置文件统一管理,实时更新,配置中心应运而生.其实,所谓配置中心 ...

  3. 介绍vue项目中的axios请求（get和post）

    一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...

  4. layers.py cs231n

    如果有错误,欢迎指出,不胜感激. import numpy as np def affine_forward(x, w, b): 第一个最简单的 affine_forward简单的前向传递,返回 ou ...

  5. V8引擎实现标准ECMA-262（三）

    推荐英文原址ECMA-262 3.构造函数 构造函数除了通过指定的模式创建对象以外,还有另外一个好处--它能够自动设置新创建对象的原型对象,这个原型对象存储在构造函数的Prototype属性中. 例如 ...

  6. Mysql主从安装配置

    Mysql主从安装配置   环境: 主从服务器上的MySQL数据库版本同为5.1.34 主机IP:192.168.0.1 从机IP:192.168.0.2  一. MySQL主服务器配置 1.编辑配置 ...

  7. objectarx之遍历当前模型空间中的所有实体，并对每个实体进行炸开

    //炸开void BomEntity(){ AcDbBlockTable *pBlkTbl; acdbHostApplicationServices()->workingDatabase()-& ...

  8. oracle如何启用审计

    通过数据库初始化参数文件中的AUDIT_TRAIL 初始化参数启用和禁用数据库审计. DB  启用数据库审计并引导所有审计记录到数据库的审计跟踪 OS  启用数据库审计并引导所有审计记录到操作系统的审 ...

  9. win2003开启ftp

    首先你要添加IIS,然后才可以启动配置FTP,步骤如下: 1.控制面板→添加或删除程序→添加/删除windows组件: 2.在弹出的windows组件向导窗口中,选择并勾选“应用程序服务器”,然后点击 ...

  10. Precision和Recall

    学习自: http://blog.csdn.net/wangran51/article/details/7579100