效果图：

源码：

<!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. RPM简介与基本使用

    一.什么是RPM RPM的全名是Red Hat Package Manager,本意是Red Hat 软件包管理,顾名思义是Red Hat 贡献出来的软件包管理:在Fedora .Redhat.Man ...

  2. linux系统文件的安全与特殊权限

    一. 文件与目录的原始属性 由于不希望文件具有可执行的原始权限,默认情况下,文件是没有可执行(x)权限的,因此文件的原始属性是:-rw-rw-rw(0666) 目录的原始属性全部开放,为:-rwxrw ...

  3. DecoratorPattern（23种设计模式之一）

    参考书籍:设计模式-可复用面向对象软件基础(黑皮书) 书中写到,装饰者模式的意图是动态的给对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活.装饰者模式的另一个别名是包 ...

  4. [C++] Virtual Destructor(虚析构函数)

    Without Virtual Destructor(虚析构函数) class A{ public: ; A() { cout <<"A()..."<< e ...

  5. 23-tcp协议——TIME_WAIT状态和FIN_WAIT2状态

    23-tcp协议——TIME_WAIT状态和FIN_WAIT2状态 摘自:https://blog.csdn.net/qq_35733751/article/details/80146161 2018 ...

  6. xStream完美转换XML、JSON(转）

    xStream框架 xStream可以轻易的将Java对象和xml文档相互转换,而且可以修改某个特定的属性和节点名称,而且也支持json的转换: 前面有介绍过json-lib这个框架,在线博文:htt ...

  7. [GO]gtk的windows环境搭建

    首先需要安装一个命令行的工作,我们这里安装的是msys2,直接百度地址然后安装即可,我这里安装的是64位 安装好之后进行该软件源配置 修改mirrorlist.msys ## Primary ## m ...

  8. [GO]接口的定义和实现

    package main import "fmt" type Humaner interface { SayHi() } type Student struct { name st ...

  9. QML开发常见错误（原）

    大部分错误,都是因为没有重新编译或者清理导致的.消除步骤: 先排除基本语法错误 清理项目 如果前两步都没有效果,手动删除程序生成目录 1.添加新控件,运行时不识别,如 qrc:ui/main.qml: ...

  10. UVa 1608 Non-boring sequences (分治)

    题意:给你一个长度为n序列,如果这个任意连续子序列的中都有至少出现一次的元素,那么就称这个序列是不无聊的,判断这个序列是不是无聊的. 析:首先如果整个序列中有一个只出过一次的元素,假设是第 p 个,那 ...