<!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. 第一次接触node.JS

    1.初识node.js node.js平时可以关注: 一.nodejs.org看看nodejs的版本升级,新特性的加入,重要bug的修复等 二.www.npmjs.com模块社区,看他人源代码,省力 ...

  2. 对于MD5加密处理方式

    来源:http://blog.51cto.com/xqtesting/1924977 但有时候我们请求的参数可能需要加密,比如登录接口中的密码可能需要经过md5加密这时候怎么处理呢? 这种方法比较简单 ...

  3. Python操作SQLite数据库的方法详解

    Python操作SQLite数据库的方法详解 本文实例讲述了Python操作SQLite数据库的方法.分享给大家供大家参考,具体如下: SQLite简单介绍 SQLite数据库是一款非常小巧的嵌入式开 ...

  4. jeecg Access restriction 问题解决

    最近导入新项目,导入所有用到的jar包,发现其中一个引用报错 import com.sun.istack.internal.Nullable; 具体信息如下: Access restriction: ...

  5. php手册常用的函数

    <?php ************************************************************/ header("Content-type:tex ...

  6. linux系统 （实验一）实验楼的课程笔记

    实验楼的课程笔记 tab 键是命令补全 输入 tail  find / 立刻卡住 这时候ctrl+c 可以终端当前指令 一些常用的指令 Ctrl+d 键盘输入结束或退出终端 Ctrl+s 暂停当前程序 ...

  7. JavaEE架构简介与JavaWeb新特性

    Fragment 将一个web应用做成几个部分,然后整合 创建Fragment项目   然后打包放入Servlet项目中的WEB-INF下的lib中 注解 @WebServlet @WebServle ...

  8. Directx11教程(48) depth/stencil buffer的作用

    原文:Directx11教程(48) depth/stencil buffer的作用      在D3D11中,有depth/stencil buffer,它们和framebuffer相对应,如下图所 ...

  9. laravle 事务

    DB::beginTransaction(); try{     $name = 'abc';     $result1 = Test::create(['name'=>$name]);     ...

  10. Libevent：2设置

    Libevent有一些整个进程共享的全局设置.这些设置会影响到整个的库.因此必须在调用Libevent其他函数之前进行设置,否则,LIbevent就会陷入不一致的状态. 一:Libevent中的日志信 ...