<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            margin: ;

            padding: ;

        }

        ul {

            list-style: none;

        }

        .wrapper {

            width: 1000px;

            height: 475px;

            margin:  auto;

            margin-top: 100px;

        }

        .tab {

            border: 1px solid #ddd;

            border-bottom: ;

            height: 36px;

            width: 320px;

        }

        .tab li {

            position: relative;

            float: left;

            width: 80px;

            height: 34px;

            line-height: 34px;

            text-align: center;

            cursor: pointer;

            border-top: 4px solid #fff;

        }

        .tab span {

            position: absolute;

            right: ;

            top: 10px;

            background: #ddd;

            width: 1px;

            height: 14px;

            overflow: hidden;

        }

        .products {

            width: 1002px;

            border: 1px solid #ddd;

            height: 476px;

        }

        .products .main {

            float: left;

            display: none;

        }

        .products .main.selected {

            display: block;

        }

        .tab li.active {

            border-color: red;

            border-bottom: ;

        }

    </style>

    <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>

    <script type="text/javascript">

        $(function(){

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

                var $this = $(this),

                    index = $this.index();

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

                $(".products div").eq(index).addClass("selected").siblings("div").removeClass("selected");

            });

        });

    </script>

</head>

<body>

    <div class="wrapper">

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

            </div>

            <div class="main">

                <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>

            </div>

            <div class="main">

                <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>

            </div>

            <div class="main">

                <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>

            </div>

        </div>

    </div>

</body>

</html>

jquery版tab切换效果的更多相关文章

  1. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  2. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  3. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. 又一Tab切换效果（js实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  6. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  7. CSS3 :target伪类实现Tab切换效果 BY commy

    http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...

  8. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

随机推荐

  1. 使用Java+SAP云平台+SAP Cloud Connector调用ABAP On-Premise系统里的函数

    最近Jerry接到一个原型开发的任务,需要在微信里调用ABAP On Premise系统(SAP CRM On-Premise)里的某些函数.具体场景和我之前的公众号文章 Cloud for Cust ...

  2. Redis常用特性

    发布订阅 ·服务器状态在pubsub_channels字典保存了所有频道的订阅关系:SUBSCRIBE命令负责将客户端和被订阅的频道关联到这个字典里面,而UNSUBSCRIBE命令则负责解除客户端和被 ...

  3. linux下安装和卸载mysql

      卸载: 1 . rpm -qa | grep -i mysql命令查看已经安装过的组件.   2. 使用yum -y remove命令卸载已经安装的MySQL组件,使用下面的命令,对于上面已经安装 ...

  4. World Wind Java开发之十四——添加WMS地图服务资源（转）

    数据是GIS的核心,没有数据一切无从谈起,Internet上有很多在线WMS地图服务资源,我们可以好好利用这些数据资源,比如天地图.必应地图.NASA.OGC数据服务等等. 在我们国家常用的还是天地图 ...

  5. [转] 防止js全局变量污染方法总结

    javaScript 可以随意定义保存所有应用资源的全局变量.但全局变量可以削弱程序灵活性,增大了模块之间的耦合性.在多人协作时,如果定义过多的全局变量 有可能造成全局变量冲突,也就是全局变量污染问题 ...

  6. 【luogu P3608 [USACO17JAN]Balanced Photo平衡的照片】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3608 乍一看很容易想到O(N^2)的暴力. 对于每个H[i]从i~i-1找L[i]再从i+1~n找R[i], ...

  7. Python中的集合set

    >>> help(set) Help on class set in module __builtin__: class set(object) | set(iterable) -- ...

  8. JSPatch - iOS 动态补丁

    JSPatch库,支持在线更新iOS应用,目前BDN项目中有用到,主要用来修复线上Crash和Bug 相关博文推荐: JSPatch – 动态更新iOS APP(这是JSPatch作者的博文) JSP ...

  9. C++的XML编程经验――LIBXML2库使用指南

    C++的XML编程经验――LIBXML2库使用指南 写这篇文章的原因有如下几点:1)C++标准库中没有操作XML的方法,用C++操作XML文件必须熟悉一种函数库,LIBXML2是其中一种很优秀的XML ...

  10. （79）zabbix key总是not supported的解决方法

    zabbix定义好key之后,总是会出现Not supported,看到这个问题,大家不用着急,问题其实很容易解决,首先鼠标点击当前key的大红叉上,会显示出报错内容. 常见的有: 1. zabbix ...