效果图：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        #tab{

            width:1000px; height: 475px; margin: 100px auto;;

        }

        ul{

            list-style: none;

            width: 320px;

            height: 36px;

            border: 1px solid #ddd;

            padding-left: 15px;

        }

        #tab li{

            float: left;

            width: 80px;

            height: 34px;

            line-height: 34px;

            cursor: pointer;

            border-top: 4px solid #fff;

            text-align: center;

            position: relative;

        }

        #tab li.active{

            border-top-color: red;

        }

        span{

            position: absolute;

            right: -2px;

        }

        #option{

            border: 1px solid #ddd;

            margin-top: -1px;

        }

    </style>

</head>

<body>

<div id="tab">

    <ul>

        <li class="active">国际大牌<span>|</span></li>

        <li>国装名牌<span>|</span></li>

        <li>清洁用品<span>|</span></li>

        <li>男士精品</li>

    </ul>

    <div id="option">

        <img src="t1.jpg" alt="" id="picture"/>

    </div>

</div>

<script type="text/javascript">

    var lis = document.getElementById("tab").getElementsByTagName("li");

    var pic = document.getElementById("picture");

    for(var i=0;i<lis.length;i++){

        lis[i].index = i;//获取索引位置

        lis[i].onmouseover = function () {

            for(var j =0;j<lis.length;j++ ){

                lis[j].className = "";

            }

            this.className="active";

            pic.setAttribute("src","t"+(this.index+1)+".jpg");

        }

    }

</script>

</body>

</html>

js 实现tab栏切换效果的更多相关文章

  1. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  2. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  3. tab栏切换效果案例

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

  4. JS案例--Tab栏切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. tab栏切换效果运用案例

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

  6. tab栏切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. JavaScript--tab栏切换效果

    tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  8. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  9. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

随机推荐

  1. [C++] Realloc Memory

      函数说明 void* realloc (void* ptr, size_t size); 语法 指针名=(数据类型*)realloc(要改变内存大小的指针名,新的大小). 新的大小可大可小(但是要 ...

  2. ECS 游戏架构 理解

    转载自:http://blog.csdn.net/i_dovelemon/article/details/25798677 理解 组件-实体-系统 (ECS \CES)游戏编程模型 - 博客频道   ...

  3. JS对象转URL参数(原生JS和jQuery两种方式)

    转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...

  4. 电脑破解wifi密码(至少连过1次的才可以)

    电脑破解wifi密码(至少连过1次的才可以) 连过的wifi密码忘记了怎么办? 只要你电脑连过的都能破解. cmd输入以下内容查看电脑连接过的wifi名字. netsh wlan show profi ...

  5. hdu 折线分割平面（递推）

    题解: 首先我们考虑直线的情况: 当n=1时原来的1个平面被分割成了2个: 当n=2时原来的2个平面被分割成了4个: 当n=3时原来的4个平面被分割成了7个: 也就是说F(n)=F(n-1)+n且n= ...

  6. MicroRNA 详解

    MicroRNA研究历史和方法   Views 88 1Report

  7. java调.NET webapi时间戳报错问题

    JAVA时间戳长度是13位,如:1294890876859 PHP .NET时间戳长度是10位, 如:1294890859 主要最后三位的不同,JAVA时间戳在.NETPHP中使用,去掉后三位,如:1 ...

  8. 编写高质量代码改善C#程序的157个建议——建议93：构造方法应初始化主要属性和字段

    建议93:构造方法应初始化主要属性和字段 类型的属性应该在构造方法调用完毕前完成初始化工作.如果字段没有在初始化器中设置初始值,那么它就应该在构造方法中初始化. 类型一旦被实例化,那么它就应该被视为具 ...

  9. requestAnimationFrame 定时器

    这个方法是通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并 ...

  10. 虚拟化技术KVM

    1>虚拟化技术: 计算机虚拟化技术是多种技术的综合实现,它包括硬件平台,操作系统,存储以及网络等,简单地说,虚拟化技术就是在单台主机上可以虚拟多个虚假主机,并可以在这些虚拟主机上运行不同的操作系 ...