效果图：

源码：

<!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. dos中的延迟环境变量扩展

    一.前言 昨天在写bat脚本的时候,发现在for里面的set命令竟然不起作用!于是搜了一下,前面的几篇都有说到这个是变量扩展的问题,但是什么是变量扩展?为什么会出现这种问题,什么又是延迟环境变量扩展? ...

  2. Visula Studio 2013 初始化静态浮点型数据在C++类内

    class MyClass { private: static const int intvalue= 50; static const float floatvalue = 0.07f; }; 如上 ...

  3. C#异步中的Task,async,await

    class Program { static void Main(string[] args) { Console.WriteLine("我是主线程,线程ID:{0}", Thre ...

  4. windows编程之内核对象

          学好windows编程,理解内核对象还是至关重要的(●'◡'●).闲话不多说,下面先来了解一下关于内核对象的知识:       内核对象(kernel object):内核对象是用于管理进 ...

  5. Perl 学习笔记－目标操作

    1.在目录树中移动. 程序运行时会以当前工作目录作为相对路径的起点, 可以使用  chdir 操作符改变当前目录: chdir "/etc" or die "Can't ...

  6. data cleaning

    Cleaning data in Python   Table of Contents Set up environments Data analysis packages in Python Cle ...

  7. java.lang.ClassCastException: com.liuyang.annocation.UserAction cannot be cast to com.liuyang.annocation2.UserAction at com.liuyang.annocation2.App.test

    java.lang.ClassCastException: com.liuyang.annocation.UserAction cannot be cast to com.liuyang.annoca ...

  8. javascrip总结42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色

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

  9. java.awt.Graphics2D 图片缩放

    关键字:java image  thumbnail  google 粗略demo: import java.awt.Graphics2D; import java.awt.GraphicsConfig ...

  10. windows在python基础上安装pip

    首先你必须已经安装了python,并且配置好环境 键入pip 复制https://bootstrap.pypa.io/get-pip.py的内容并创建get-pip.py文件(该文件的内容就是刚刚复制 ...