效果图：

源码：

<!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. table 合并行和列

    table合并行列,以及拆分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. python学习——查找计算机中文件位置

    有时想查找某个文件时,却忘记了文件在计算机中存放的位置,这是一个经常遇到的问题. 当然如果你使用windows 7的话,可以直接用右上角的搜索框来搜索. 最近在学习python,正好拿这个来练练手,写 ...

  3. dll总结

    [转]http://www.cnblogs.com/cswuyg/archive/2011/09/30/dll.html 动态链接库dll的使用有两种方式,一种是显式调用.一种是隐式调用. (1)   ...

  4. c#反射优化 表达式树

    using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; us ...

  5. CentOS7 下 安装 supervisor

    [注] linux环境必须安装 python 1.获取supervisor包:[https://pypi.python.org/pypi/supervisor] # wget https://pypi ...

  6. Introduction MBG

    文档地址 http://www.mybatis.org/generator/configreference/xmlconfig.html 源码地址 https://github.com/mybatis ...

  7. Statement 接口的应用（存在sql语句的注入风险）

    实现简单的登录功能 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; impo ...

  8. MongoDB默认配置

    mongodb使用了yaml格式定义的配置文件(http://www.yaml.org/) 默认为: # mongod.conf #where to log logpath=/var/log/mong ...

  9. Reporting Service服务SharePoint集成模式安装配置（3、4、安装sharepoint 2010必备组件及产品）

    Reporting Service服务SharePoint集成模式安装配置 第三步和第四部 第三步 安装sharepoint 2010必备组件 1.安装SharePoint2010必备组件,执行Pre ...

  10. [LeetCode 题解]: ZigZag Conversion

    前言   [LeetCode 题解]系列传送门:  http://www.cnblogs.com/double-win/category/573499.html   1.题目描述 The string ...