<!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. ecshop二次开发之视频上传

    1.前台展示效果: 2.后台展示效果: 3.代码实现: 后台实现过程: 1.在languages/zh_cn/admin/goods.PHP中插入 $_LANG['tab_video'] = '视频上 ...

  2. js计算精度问题(浮点数误差，大数计算出错)

    https://github.com/camsong/blog/issues/9 0.1+0.2 //0.30000000000000004 1-0.9 //0.09999999999999998 9 ...

  3. qt加载背景图片的一种方式

    //加载背景图片 void LCTGrid::loadBgPicture() { QImage image; QPalette palette; image.load(m_sPicturePath); ...

  4. maven的配置和使用

    Maven 简介 1.1 Maven 是什么 翻译为“专家”,“内行” Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.2 为什么使用Maven ...

  5. IOS 第三方管理库管理 CocoaPods

    CocoaPod集成Tips http://www.jianshu.com/p/dcde0668eee9 import导入类失败 http://www.360doc.com/content/15/03 ...

  6. 洛谷 P1119 灾后重建 最短路+Floyd算法

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P1119 灾后重建 题目描述 B地区在地震过后,所有村 ...

  7. Xici drop flower

    var xici_user_api = "http://www.xici.net/apps/wedding/?method=wedding.user.getusername&from ...

  8. 国外最受欢迎的十大社交APP网站

    国外最受欢迎的十大社交APP网站 2016-11-01 09:34悠悠国外网     有哪些好的国外社交软件你知道吗,想使用国外流行的社交应用来体验不一样的社交么,想和外国友人交朋友么.本期悠悠国外网 ...

  9. 系统重装后，Mysql数据库重装加载原来数据库

    相信不只我一个人因为重新装了系统后,导致mysql数据库无法使用的问题.尽管可以重新安装一个mysql服务端程序在自己的电脑上,但是要如何才能够将之前的数据库也一并重新恢复呢? 今天,我找到了解决之道 ...

  10. iis7服务器隐藏index.php

    1.安装url重写模块 32位:http://download.microsoft.com/download/4/9/C/49CD28DB-4AA6-4A51-9437-AA001221F606/re ...