<!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. 一眼看穿👀JS基本概念

    前段时间忙,好久没更新了,继续梳理基础知识这期总结的是JS的基本概念 标识符 所谓的标识符是指变量,函数属性的名字,或者函数的参数 第一个字符必须是一个字母,下划线(_)或者一个美元符号($),其他字 ...

  2. uml设计之多重性

    ---------------------------------------------------------------------------------------------------- ...

  3. php Laravel Thrift使用TMultiplexedProcessor复用端口模式

    thrift的使用中一般是一个Server对应一个Processor和一个Transport,如果有多个服务的话,那必须要启动多个Server,占用多个端口,这种方式显然不是我们想要的,所以thrif ...

  4. 在Struts2里面嵌入Spring

    第一步:在web.xml中增加以下的listener <listener> <listener-class>org.springframework.web.context.Co ...

  5. 如何写JavaScript中的callback回调函数

    如何写回调函数? 如果自己在写一个方法或函数,你有可能会遇到需要一个回调函数.下面就是一个简单的常见回调函数例子: function mySandwich(param1, param2, callba ...

  6. 开启远程XUL

    参考:https://developer.mozilla.org/zh-cn/Remote_XUL firefox自4.0起(2011年4月版本,目前最新版为13.0),开始禁用远程XUL,这阻碍了初 ...

  7. Vagrant-安装教程及常见问题

    http://ju.outofmemory.cn/entry/346215 前言: Vagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境. 它的主要意义是让所有开发人员都使用和线上服务 ...

  8. (五)IO流之ByteArrayInput/OutputStream

    ByteArrayInputStream:是把字节数组当成源的输入流 String string="hello shanghai"; ByteArrayInputStream bi ...

  9. java jvm 参数 -Xms -Xmx -Xmn -Xss 调优总结

    常见配置举例  堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可用虚拟内存限制;系统的可用物理内存限制.32位系统 下,一般限制在1.5 ...

  10. DRP 2016-06-30 16:36 314人阅读 评论(21) 收藏

    学习drp有一段时间了,其实从很久以前,再提高班的学习就已经不是单纯的学习,学习总是伴随着项目.这就使得我们的学习不可能全天的,大把大把时间的学习只出现在第一和第二年,所以,各自珍惜吧. DRP(Di ...