效果图：

源码：

<!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. PHP异常处理详解

      PHP异常处理详解 异常处理(又称为错误处理)功能提供了处理程序运行时出现的错误或异常情况的方法. 异常处理通常是防止未知错误产生所采取的处理措施.异常处理的好处是你不用再绞尽脑汁去考虑各种错误, ...

  2. 前端学习--HTML标签温习一

    1.<a>标签 在所有浏览器中,链接的默认外观如下: 1)未被访问的链接带有下划线而且是蓝色的 2)已被访问的链接带有下划线而且是紫色的 3)活动链接带有下划线而且是红色的 提示:如果没有 ...

  3. crm第一天

    课程由1-7组成 自己实现的代码: 教程:

  4. LA4794 分享巧克力

    Sharing Chocolate Chocolate in its many forms is enjoyed by millions of people around the world ever ...

  5. Django调试工具django-debug-toolbar安装使用教程

    在网站开发中难免要调试页面,而使用django开发站点时,可以使用django-debug-toolbar来进行调试,安装这个插件很有用,我一开始是为了查看某个页面中所有的context变量值,当然你 ...

  6. fgetc()

    fgetc() 函数从文件指针中读取一个字符.

  7. Linux网络配置之虚拟网卡的配置（Red Hat 6.5）

    怎么查看当前的网络状态,这里就不着重描述,用ifconfig命令就可以.我们直接进入主题. red hat系统中的网卡配置在这个目录中:/etc/sysconfig/network-scripts 1 ...

  8. left join、right join、inner join、full join

    转自:某一网友 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join ...

  9. ContextLoaderListener和Spring MVC中的DispatcherServlet学习 随手记

    Servlet上下文关系 DispatcherServlet的上下文是通过配置servlet的contextConfigLocation来加载的,默认实现是XmlWebApplicationConte ...

  10. 关于利用word发布文章到博客

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...